Is it possible to make a website that is horizontally AND vertically scrollable?
Hello, I am trying to make an experimental narrative website that tells two different stories in a page. The website is currently just horizontally scrollable, and I just have a big fixed image top of images that has a big hole in the middle.(so users read the story only through the hole) I originally had a clickable image at the end of horizontal scroll so that it links to the another story, but I wonder if I can have horizontal scroll AND vertical scroll so that it shows different images at the
3 Tier Menu Adding class to multiple li
Hi, i'm building a 3 tier drop down menu and i want the other menus to open and close depending on what link i clicked on. This is what i have so far JSFIDDLE At the moment the first drop down opens fine and disappears when i click the other drop down. But when i click the menu item drop down within the drop down menu it doesnt open. I'm pretty sure my jquery code is wrong somewhere. Please help. Help much appreciated.
Selecting Child and Grand Child Elements
I am trying to select a child or a grand child element by clicking on it. Upon clicking on the child or grand child element, its border is supposed to turn blue to indicate that it has been selected, but nothing happens. I have tried this script but it's not working, please help.
Unable to hide class on click
Hi, I am using the following to show and hide menu items on click, it shows the menu items when I click on the target however when I click a second time it does not hide the menu items again. $(document).ready(function(){ $(".menu_sub_par_head").click(function(){ if ($('.menu_sub_head').is(":visible")) { $(".menu_sub_head").hide(); } else { $(".menu_sub_head").show(); } }); }); Any assistance would be
List all links in ajax callback
I want to make a list of all links per 'content' item but I can only figure out how to get ALL links on a page EXCEPT for the ones retrieved via the AJAX query. How can I search for all links within a variable? $.ajax({ context: this, url: url, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { for(i = 0; i < data.d.results.length; i++) {
.hover and .click, resizing
I don't think i used correctly. I think there are another way to do reload(after resize) and not for the whole page,but just for function. Any Tips? $(document).ready(function(){ if (document.body.clientWidth <= 1400) { $( window ).resize(function() { location.reload(); }); var a=$('.myMenu ul li.has-children > a'); a.click(function() { $(this).parent().siblings().find('ul').slideUp();
shrink or expand an iframe based on a zoom-button click?
I show Youtube and Vimeo videos on my website, and I want the user to be able to adjust their size by clicking on a zoom/unzoom button. Since both Youtube and Vimeo use 'iframes', it would seem that a jQuery command that modifies the size of iframes might work, assuming the videos resized along with their containing iframe. I looked for commands to do this, and there are entire libraries available on github that resize iframes. The reason given for these libraries is that users resize webpages
Parallax Audio Scrolling on set positions
Hello, I've been searching for a way to inject some jQuery into my squarespace site so that a certain audio file would play depending on the vertical position the visitor was at. My site is where I post short stories, and the specific reason I would like to use this on my site is I would like background music to play different sections of music as people scroll down to read more. After searching around the internet for a while I ended up finding a similar thread on this site (here), and have essentially
A Problem with jQuery selector inside loop
Hi all, I think the best way to explain this issue is with a fiddle - https://jsfiddle.net/hrnL3wmw/56/ I'm trying to return the result of the calculation into a span tag that is inside a css class which will affect all instances of the loop. I'm not sure if there is a way to put the result of the sum inside the span tag without creating a unique id for each case? I'm not sure if I've explained this well, let me know if you have any questions / can't understand this! Thanks
guys, is that anyone know what i need to add in missing part. wanna retrieve data from database
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Image Slider Theme - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title> </head> <body style="font-family:Arial, Verdana;background-color:#fff;"> <!-- Caption Style --> <style> .captionOrange, .captionBlack { color: #fff; font-size: 20px; line-height: 30px; text-align: center; border-radius: 4px; }
Jquery not working - trying to show / hide div when a button is clicked
Hi, can anyone help. I can't figure out why this isnt working.... I have a div called #overlay that is currently hidden. It covers the whole page and has a form inside. I want to make it visible when a button on the page is clicked. <div id="changingchange"> <div id="overlay"> <div id="form"> <!-- form here --> </div> </div><!--overlay--> <div class="inner"> <div class="page"> <div class="button">Show form</div> </div> </div>
Is ARIA compatible with jQuery events?
Hello, I would like to know if ARIA is compatible with jQuery events? This is above my level of skill and I don't have time to look through documentation. I am trying to get this sub menu accessible. I have tried this code with ARIA, but it is not working. Any pointers? <script type="text/javascript"> jQuery(document).ready(function($) { $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'}); $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) { var options = $(this).closest('.bbp_custom_links_submenu');
how can I select a list from database, using an athor select field in my vue (I send the parameter to the controller in my ajax code)
Hi, I'm biginner in ajax code, How can I use ajax code to select doctors list from database, to print them in my page, using the selected field in other select component(doctors in the selected establishment). I wrote this code, but it doesn't work, because it doesn't accept the data for the controller's parameter method: <script> $("document").ready(function(){ $("#establishment_id").change(function(){
Create an array based on the order of dropped elements
I've been trying to resolve this for several hours and have failed miserably. I understand the basic concept of creating an array based on say, getting the id's from a set of div's, using var myArray = $('#menu > div').map(function() { return this.id }); $('button').click(function() { console.log(myArray.get().join(', ')); }); jsfiddle but I can't for the life of me figure out how to create an array from some ui.draggables. In the sample I would need to return an array that matched the order
Form - Get Data with Ajax
Hello, i have a form with a lot of input fields. I want to solve this: An employee write his personal number in the input field. After he writes his number, the other fields would be filled with the personal data. Is this possible with jquery? Any Hints for me?
Array Comparison
How can I compare two arrays and extract the indexes for all the differences? Using: var diff = $(correctAnswer).not(userAnswer).get(); will only give me the values that appear in 'correctAnswer', which don't appear in 'userAnswer' (i.e. 2 and 8). What I want to be able to do is to compare the arrays in order and then extract the index numbers for any differences, so e.g., in this sample it would be: index 1 (the correct answer is 2, the user answer is 3) index 2 (the correct answer is 3, the user
audio fading in and out on scroll position
hi... i am stuck on something that is sooo near to working as i want it to... i have a page that plays audio as you scroll from one div to another - the audio fades in / fades out depending on scoll position. it's working fine. but.... i want each sound to play only once - not looping to the start of the sound as it is at the moment. i've tried a few things but to no avail - it just keeps looping :-( i found and am using this script/code via https://forum.jquery.com/topic/j… this is the full code:
Loop Check ?
Correct me if this is wrong way to write a condition ? { $("body").addClass("");} else { $("body").removeClass(""); } };
For loop to simplify code
I'm trying to work out how I can write this code more efficiently. I'm thinking it should be possible to 'wrap' it in a 'for loop', but I can figure out how to assign each iteration ( i = 9 to i = 12) to the 'multiplier' and then to get the related code to apply to the relevant iteration? for(i = 9; i < 13; i++) if(multiplier == 9) { middleArray.pop(); middleArray.push('0'); } if(multiplier == 10) { for(i = 1; i < 3; i++) { middleArray.pop(); } middleArray.push('1',
jQuery properties that mimic DOM properties
One of the most common errors I see among new jQuery programmers is trying to access or assign DOM properties on jQuery objects. For instance, today on StackOverflow I saw this: $('input', this).checked = true; Except in the cases where the DOM property has the same name as a jQuery method, it seems like it should be possible to implement this using Javascript getters and setters.
Trigger event when all dragable divs have been dropped
Is there any way to trigger an event once all dragable divs have actually been dropped. In the sample there is a button set to 'display: none'. What I would like to happen is, when the three red divs have been dropped into their green droppable divs for the button to 'show/fade in'. jsfiddle Many thanks
Insert cursor on click of a button
Hello, The code below puts the Reply form and Topic form for BBPress in a slide out. I would like the cursor to be automatically inserted on these conditions. User clicks Create Topic button, slide out opens, cursor is inserted in the Title field. User clicks Reply, slide out opens, cursor is inserted in to Reply field/textarea. Can you please help me modify my code so it does this? Code in functions.php of my WordPress theme: /*Add reply form slide out on BBPress*/
function show_form_on_click()
Add two diffrent Products in Cart with jQuery in WooCommerce
Hey everyone,im trying to add multiple products with just one Click to my WooCommerce Cart. This is my actually code: jQuery("#button").click(function(e){ e.preventDefault(); addToCart(28,29,"Red"); return false; }); function addToCart(p_id,v_id,a_name) { jQuery.get('/wp/?post_type=product&add-to-cart='+p_id+'&variation_id='+v_id+'&attribute_color='+a_name, function() { }); } At least im able to add one product, but i would like to add some more of the addToCart()-Functions like:
How to close menu when clicking on page whitespace?
Hello, I have a custom menu that a few nice people helped me build to hold all the admin links for the BBPress plugin for WordPress. Currently, if you click the Options button, it will open, click it again, it will close. I would like to add some additional jQuery to make it close when a user selects a place outside of the menu container/page whitespace. Here is my code. /*Custom BBPress admin links menu*/ function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) { if ( is_user_logged_in()
Image Search from Dropdown, and Highlight Corresponding Image(s) Based on id
Hi, Does anyone have an idea on how to do the jQuery for the gif image I've attached? Essentially, you select from the dropdown and the image(s) with the corresponding id go from being faded out to faded in. Thanks!
Swap values in an array
How can I write this in a concise way? Basically, I would like the values in 'middleArray' to change base on the value of the variable 'multiplier'. 'multiplier' is determined by the user and will have a value between 2 and 5 inclusive, so if the user selects say '3' then I need the values in the array to change/be updated accordingly. I've looked at the .map() functionality but am not really sure how to apply it in this instance or if it even is the right approach! if(multiplier == 2) { var
Do a series of fade-in, fade-outs (but execute serially)
Hi all, Basically, I am calling a function in a for-loop. That function fades in and out some elements on the DOM. However, the for-loop keeps advancing up to its maximum before the animations in my function are done. How can I tell my for-loop to wait until the first function call is done before advancing to the next iteration? Cheers.
Delete file
Hi I am using this tutorial to load file to the server: http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/#comment-602456 But now i need delete the file when the user make clic in the file is already load. I mean: when i load the file, it apper with the green ckeck, to say is already load, well now i need when i make clic in this image, delete the file from the folder and from the div too. Sorry for my poor english.
Responsive menu: toggle adds inline styles
I am trying to create a simple responsive hamburger menu type: http://codepen.io/bg17aw/pen/yOzvpE However, since toggle adds inline styles of "display:none" this creates an issue where each time I re-size to mobile view (less than 768px) and press on the hamburger twice (once to show the menu, once to hide it), then re-size viewport to desktop view (above 768px), the navigation remains hidden because of the inline styles. The exact same issue is described here: https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle-display-none/
Making menu width moving marks(small red triangle)
I want to make clicked menu arrow(width :after), but i want only one who is clicked turns into toggleclass(menuarrow1) and all other back to : after How to make this? $(document).ready(function(){ $('.myMenu ul li.has-children > a').click(function() { $(this).parent().siblings().find('ul').slideUp(); $(this).next('ul').stop(true, false, true).slideToggle(); $(this).toggleClass('menuarrow1'); return false; }); }); http://codepen.io/psairidas/pen/wGpxgq P.S.
verify facebook profile link
I am struggling to verify a facebook profile link with jquery. Users need to fill in the whole url of their FB profile link, not just the username. And multiple options are allowed. https://facebook.com/somename/ => true (with or without the last / and optional www) https://facebook.com/pages/ => false (with or without the last / and optional www) https://facebook.com/pages/somename => true (with or without the last / and optional www) https://facebook.com/ => false (with or without the last
know if a css class exists in document
Hi, i'm looking for know if a css class name exists in document, not get elements by class name. Is there a way to do that? Best Regards Maximiliano from Uruguay
Re-attach CSS to dropped draggable div
I have a bunch of divs which are 'draggable': HTML <div id="a1" class="answerCard noselect">1</div> <div id="a2" class="answerCard noselect">2</div> <div id="a3" class="answerCard noselect">3</div> <div id="a4" class="answerCard noselect">4</div> <div id="a5" class="answerCard noselect">5</div> CSS .answerCard { position: absolute; top: 0px; left: 0px; width: 150px; height: 150px; font-size: 120px; font-weight: 700; color: #fff; text-align:
If input has a value, hide label
Hi, I'm trying to achieve that if an input-box has a value it's label should hide. Please have a look at my example on CodePen: If input has a value, hide it's label The part which is not working is this: if ($(this).val() !='') { $(this).closest('.form-label').hide(); } What is wrong with my code? Thanks
Show/Hide Tooltips on Button Toggle
Is there a way to show/hide 'all' tooltips on a button click rather than a mouseover of individual divs? On the fiddle, a mouseover each box reveals the tooltip for that box, I want to be able to disable the tooltips being shown on a mouseover but enable them to all show on a mouse click of the button, which can be toggled to then hide all tooltips when clicked again. NB: Unsure why the tooltips aren't hovering over their associated divs on the fiddle, all working fine in my actual code. jsfiddle
Why is script looking for theme files sometimes at mysite.com/mysite.com/src.gif?
See screenshot below. http://localhost:6835/skin/%22http://etcetc... This is not from my code -- it's from jqui:
Browser back button detect and reaload
Hi I need to check the action browser back and forward. If one of them clicked. reload the page either with the confirmation or without confirmation . Pls help
jQuery conflict Uncaught TypeError
Hi, I created on my frontpage a row with icons, when you click on the icons you will see more information about the subject. But the problem is now after creating this script that it doesn't work very well. I get the following error in my inspector: Uncaught TypeError: $(...).visible is not a function Uncaught TypeError: $(...).loadPage is not a function(anonymous function) Could anyone explain what's missing in this script? I've tried to add the no-conflict mode in jQuery but I can't get it working.
Problems with jquery in magento
Hello, I have a problem with jquery integrated into magento. Code was used to send emails to customers (using php mail function). In IE,Chrome work fine, but not in Mozilla and Safari browsers. I have tried to host it in the server (not in magento) and it works, with all browsers. I tried to use "noConflict();",but didn't help. Does anyone know the problem?? Many thanks for your answers. This is the code $(document).ready(function(){ $('#postcode').keyup(function() { $(this).val($(this).val().toUpperCase());
remove click files and submit php
https://jsfiddle.net/vcode/65w3j6rt/ <form action="" method="post" enctype="multipart/form-data"> <div id="drop-zone"> <p>Drop files here...</p> <div id="clickHere">or click here.. <i class="fa fa-upload"></i> <input type="file" name="file[]" id="file" multiple /> </div> <div id='filename'></div> </div> <input type="submit" value="GO"> </form> *sql_insert.php : print_r($_FILES); When I click the button removes any file This is what I want: After clicking
Next Page