I have a working version of my code here:
http://jsfiddle.net/5Hqs3/24/
As you can see, there is a default message that displays upon arrival. After a few moments, the cycle begins and "Billing Reminders" becomes bold and a billing message is displayed, then Collections, then Payments.
If you hover over one of the links, it displays that message. Works great.
However, I now need to add multiple messages per category so that the active link remains bold, but the 1st message fades away and a 2nd is displayed. Or a 3rd, and so on.
You'll see in the jsfiddle that I've got divs for the second message within each category that I need the jQuery to cycle through regularly, or when the user hovers over that link.
Any thoughts?
Take a look into the jquery Cycle plugin. This will cycle through a set of tagged elements. So on select/hover you can trigger a cycle element to start playing. There are a host of options available like before/after/onend, etc. So on hover of one of your divs you could trigger a cycle object to start playing. On mouseout you stop the cycle.
Related
I wanna make a button which shows two values hide and show. When we click the button hide it hides the content and it value changes to show and when we click show it displays the content.
I agree with previous comments. This is something typically taught in a tutorial. I was able to find an existing example in SO in less than 30 seconds. Hope this helps: https://stackoverflow.com/a/13652860/6288438
I'm working on a simple picture gallery that pulls down info from the Flickr API. Basically the premise of the gallery is that each page must hold 10 images, and paginate according to how many pictures are in each gallery. When a user clicks on a photo, an overlay should pop up with the picture in a frame.
You can find my code on CodePen here: http://codepen.io/anfperez/pen/QEZNEZ
I've been able to get the gallery working successfully for the most part with one exception: on the first page, only nine pictures are loaded. My theory is because I have some jQuery commands that paginate 10 <img> elements. In my HTML I have an img tag hidden inside a #frame div, which is hidden until the user clicks on a picture. So my jQuery counts that hidden img tag as a part of the 10 image maximum, and includes it in the pagination system. How can I exclude the first img tag? I've been trying to use
$('img:not(:first)')
as my selector, but it's not working.
The second issue is that, if you click away to a different page, then return to the first page, you can now see a large blank frame element. But that element should be hidden whenever a picture is not clicked. Any suggestions for how to make this code cleaner?
The issue is that you're adding the paginate class to all <img> tags when you're setting them up in your success loop on line 38.
This: $('img').addClass("paginate")
Should be: $('#photo-list img').addClass("paginate")
This limits it to all the images in your photo-list div so it doesn't catch your invisible frame image. This fixes both the off by one issue and the paginate issue that shows the invisible frame. You can also move this outside of the loop as there's no reason why this should be called on all images at every loop iteration.
Unrelated, you should also add a semicolon on line 78. Chrome throws an error thinking that the return value from the first anonymous method is calling the next method. Code looks fine otherwise.
I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)
HTML - Javascript - CSS3
i have a scrolling elements that contains texts.
When the user scroll using the side bar of the scroll , All buttons in my page will ignore the 1st click on them , u need to click a 2nd time to work.
i explain otherwise :
All my button are working fine and act with the 1st click on them (normal) .
But if you scroll an elements within the page , then the next click on any button will not work ... it's only when u click a 2nd time it works.
any help ? thx.
I think when you scroll something will reinitialize like your elements so on scrolling they will disappear so you should reinitialize the controls it will work.
You can give few code you wrote which will make more clear to us.
I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.
You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.