I'm a designer, have only a slight idea about jQuery. But I love learning :) So I decided to do the below thing myself, and I can't quite get it to work.
My idea is to have a slider with actual slides as next/prev buttons. So I can go to next slide by clicking the actual next slide - the same for previous slide. I guess the picture below shows what I mean.
Desired effect
I've tried to do it this way:
assign a class .main to the main image
assign a class .prev to the partially hidden image on the left
assign a class .next to the partially hidden image on the right
And when I click .next, I change classes .main > .prev, .next > .main, .next +1 > .next.
Now I can do it one step up and it works, the classes change and it works fine. But then when I click the now-.next class, jQuery seems to not recognize it's .next now and responds to it as if it were still the .main class. The updated classes don't respond (the now- .main class still works as .next, as if jQuery was not reading the change).
Here's the HTML:
<div class="view">
<ul>
<li class="left" data-id="1"></li>
<li class="main" data-id="2"></li>
<li class="right" data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
</ul>
</div>
And the script:
$(".next").click(function(){
$(this).prev().removeClass("main").addClass("prev");
$(this).removeClass("next").addClass("main");
$(this).next().addClass("next");
$(".view ul li:first").animate({marginLeft: '-=57%'});
$(".view ul li.main").animate({marginLeft: '-=15%'});
});
I guess it's toddler talk for you, but perhaps you could help me get it to work. How would you come about the matter? Any ideas?
Big thanks up front!
Cheers!
It is not really toddler talk because there are a few pitfalls you need to be aware of.
First of all, the click handler will not work for the new .next this way.
You need to use
$('body').on('click', 'li.next', function() {
instead to make it work for dynamic content.
Another problem is that you forgot to remove the .prev class
$(".prev").removeClass("prev");
Another small mistake is: $(".view ul li:first").animate({marginLeft: '-=57%'}); which always takes the first element, but after the first slide it should take the .prev instead. (so change it to li.prev).
I guess btw that you use class="prev" instead of left (typo in question).
See the full code here:
http://jsfiddle.net/a8Lf9r68/3/
And as #Mō Iđɍɨɇƶ says, you need some additional code to handle the last and first element clicks. But that depends on what you want, and I see it as outside the scope of the question.
Related
I did not find any answer in the web, so may be somebody could help me.
For example if we have next CSS declaration:
.hot_imgs li .detail{position:absolute;left:0;top:0;display:none;width:190px;height:190px;padding:0 40px;color:#fff;font-size:16px;font-family:"Microsoft YaHei","\5fae\8f6f\96c5\9ed1","\5b8b\4f53"}
.hot_imgs li .detail h3{margin-top:75px}
.hot_imgs li a:hover .img_bg,.hot_imgs li a:hover .detail{display:block}
And given elements:
<div class="hot_imgs">
<li id="711F">
<a href="#">
<img src="www.fishki.com" alt="Young" width="270" height="190">
<span class="img_bg"></span>
<div class="detail">
<h3>Young</h3>
</div>
</a>
</li>
<div>
As we can see from CSS declaration, when link of the list inside div with class hot_imgs is hovering, the div will be overlaid by another div with details class.
I'd like to use jQuery to identify which elements can potentially have a ":hover" attribute triggered on roll over without any mouse interaction.
Thanks a lot
You cannot target pseudo elements themselves, so if you are going to use jquery for this it has something for hover built in. You need to know what items you want to check for hovering, so for example if you wanted to check the image you could do.
$(".hot_imgs img").hover(function(){
//your logic here
});
Just a side note - All elements can have ':hover', so you will need to target with jquery. So there is nothing to check which elements 'can potentially' have :hover, as it is a pseudo selector/class.
Here is a fiddle for this example - http://jsfiddle.net/W4Km8/5413/
I know that transitions for the display property don't work, but I was wondering if there is a work around for this. I tried the visibility property but it doesn't seem to suit the task I am trying to achieve, or maybe I did it wrong. As you can see, I am displaying different text when you hover over the anchor tag by setting the span to display: none;. Animating the opacity won't be a good solution because the element being animated will still occupy the space it held. Is there maybe a workaround in Javascript or jQuery? Here is the code. I left out the transition property and its prefixes for brevity. The animation I want is for it to switch slowly between the two, i.e. One fades out, the other fades in. There doesn't have to be an overlap, but it doesn't matter if there is.
HTML
<div class="navbar">
<ul>
<li><a id="menu1" href="index.html"><i class="fa fa-home"></i><span> Home</span><span class="show"> Welcome Home</span></a></li>
</ul>
</div>
CSS
.show, a:hover span {
display: none;
}
a:hover .show {
display: inline;
}
You could try using jquery slide transitions when you hover over the anchor element. Check out http://api.jquery.com/slideToggle/
An example is
$("#menu1").hover(function () { $("#menu1 span").slideToggle("slow"); }, function(){ $("#menu1 span").slideToggle("slow"); });
You can try that on hover the object floats and animate the opacity. Making it float wont make him occupy the space.
Cheers J
I need to be able to have a tab menu above my Carousel, which when clicked on will move the carousel to the associated package within the carousel.
Also when the carousel is swiped the tabs will move accordingly to what package you swipe to. So the active tab will change if you swipe and vise-versa.
I have put together a demo, all working apart from linking up the tabs and carousel. I am totally lost at how to do this.
My DEMO code and example: -
http://jsfiddle.net/jnYs7/
<ul id="navlist">
<li>BASIC</li>
<li class="activeStep">STANDARD</li>
<li>SUPER</li>
<li>ANTOHER</li>
</ul>
Plugin is using:
http://www.mobify.com/mobifyjs/modules/carousel-examples/
Hope someone can help out. Thanks
An example: http://jsfiddle.net/jnYs7/3/
What I did was move the #navlist inside of the .m-carousel and added <a> with data-slide='number_here' attribute to the <a>, making it a pagination. I also changed your activeStep class name to m-active.
Now you only need to style it.
UPDATE http://jsfiddle.net/jnYs7/10/
Change the margin-right here to define the distance between the divs
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:first-child),
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:last-child){
position: relative;
float: left;
left:40px;
margin-left:0px;
margin-right:-30px;
}
I didn't find any reference to the starting point but you can use something like .trigger() from jquery that will trigger the click event on a link
$('#navlist li:eq(2) a').trigger('click');
//:eq() is the index of li (in this case super)
In the updated fiddle I changed some css in overall, compare the fiddle for missing CSS.
I have this menu:
<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
<a><span>Click Me!</span></a>
<div class="submenu">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</div>
</li>
</ul>
I want the submenu to be hidden when the page is loaded. When the user clicks the parent item, the submenu should appear.
When I use inline CSS like this, everything works fine.
<div class="submenu" style="display:none;">
See this demo: http://jsfiddle.net/zJk6P/ (Click on "Click me" in the bottom right to run the demo.)
When I use external CSS like this, the submenu doesn't appear anymore.
#nav div.submenu{
display: none;
}
See this demo: http://jsfiddle.net/5tNqc/4/
Why is there any difference and how can I get the sliding effect to work with external CSS?
The reason my code didn't work was that Javascript doesn't have access to external CSS style declarations. Only inline styles are accessible trough element.style.
Effect.toggle(element, 'slide'); tries to slide the element down when the element is not displayed, and up when the element is displayed. So when the element is hidden by an external style sheet, Effect.toggle will try to slide the element up, because it simply doesn't "know" the element is already hidden.
The solution is to work with class names. My final solution checks whether the element has a certain class name. When the class name is present, the element is not clicked yet, so the element is slided down and the class name is removed. All next clicks, the element is toggled.
I built and uploaded a small demonstration here: http://i.amniels.com/ext/stackexchange/2011-09/index.html
The difference is that you don't change display to be set to display: block;, which is the standard, and so it gets overridden by the external explicit definition that it should be hidden. If you add another line in the Javascript to add thisDiv.style.display = block;, and remove it at the end of hiding it, it should work just fine.
Update:
So, the reason that it doesn't show up when you have display: none; in your CSS file, is because when the Javascript animation starts, instead of setting display: block; on your div, which would make it visible, it simply removes the display property on the element entirely, so it is still affected by the external CSS.
My suggestion: if you don't want the Javascript to become more difficult, simply leave the style inline, so that it can be removed later by Javascript automatically. If you want to use an external CSS style for it, you could just add a short helper function to your Javascript to change the CSS display property to block whenever it starts, and set it to display: none after the animation is finished.
I've seen this question asked several times but haven't seen any answers.
I have a ul that I'm expanding and collapsing using slideToggle() with jquery.
The code is simple:
$('#leftMenu li a.moreLess').click(function() {
$(this).next().slideToggle('normal');
});
With markup of:
<a class="moreLess">Click here to see more</a>
<ul>
<li>something</li>
<li>something else</li>
...
</ul>
I have a button with a class of .moreLess and when it is clicked the list below it should expand or collapse. For some reason in IE 7 all of the content is disappearing once the list is fully expanding. When it collapses, the content appears again until the list is fully closed.
I'm not sure if this is something CSS related, but I was hoping someone might have run into this before.
Thanks in advance for your help!
put a zoom:1 property. it works with position:relative.
FYI the problem was with CSS positioning on the elements inside the UL that is being toggled. Once I removed any relative and/or absolute positioning on those elements, the problem no longer happened.
put
overflow: hidden;
for the div in which you have the content, that gets messed up. Works for me, but still it's and IE bug...
in my case the content loaded with slideToggle was "shifted" down creating 2 empty space (only in IE7)
i solved with this css:
form {
margin: 0;
}