I have a simple script on my site to reverse the display of a list.
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
});
It works great, but the reversal of the list occurs after / during page load — and thus the list (which is largely imagery) appears and then snaps into reverse order, which looks a little clunky.
Is there a way to delay the display of the list until after it has reversed?
Thanks in advance.
Set the visibility to hidden until you finish your flip.
Do not use display:none because it will mess up the rest of your screen.
You could use the style display: none in your HTML, something like:
<ul style="display:none">
..and then during the loading of the page you show the list at the end:
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().show();
})
As already suggested well by O_Z
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().css('opacity', '1');
})
Related
Can we make a script that allows to hide certain elements when endpoints are loaded in our website URL???
For example, when someone clicks on a currency option, it creates an endpoint "/?wmc-currency=USD". Or if implemented into the web like this https://www.yoursite.com/product/?wmc-currency=USD.
I want a div or any element to be hidden when "/?wmc-currency=USD" is added to the url.
Any help would be very valuable to me. Thanks very much
function checkEndpoint() {
if(window.location.search=="?wmc-currency=USD") {
document.getElementById('testid').style.width = 0;
}
}
checkEndpoint();
// you can also delete the div if you want but with this, you can always bring
// it back without having to remake it
make sure you change the id for the div you want
This is the code I ended up using, because style.width doesn't hide the text.... So I use display none
function checkEndpoint() {
if(window.location.search=="?wmc-currency=USD") {
document.getElementById('testid')style.display = 'none';
}
}
checkEndpoint();.
But still, I thank you very much
I created something where only 1 resourceGroup can be expanded at a time. When another one is toggled open, the other one closes. However, this only works like 95% of the time. When I toggle them quickly, it might not work and two get opened. Can anyone figure out why and how to fix this?
$(document).on('click','.fc-icon-minus-square:not(.open_now)',function(e){
if($('.fc-icon-minus-square:not(.open_now)').length > 1){
$('.fc-icon-minus-square:not(.open_now)').addClass("open_now");
$('.fc-icon-minus-square').click();
}
else{
$('.fc-icon-minus-square').not(this).addClass("open_now");
$('.fc-icon-minus-square').not(this).click();
$(this).removeClass("open_now");
$('.open_now').click();
$(this).addClass("open_now");
}
})
https://codepen.io/adam-silver/pen/rNWLvYv?editors=001
I'd try to simplify the code and use an optional bit of CSS as well.
On-click:
Remove all open_now classes (don't check if the clicked element has open_now)
Add open_now class to the clicked element
Something like:
$('.fc-icon-minus-square').removeClass("open_now");
$(this).addClass("open_now");
And in the CSS, I'd go with (optional, if you don't want the opened to be clicked):
.open_now {
pointer-events: none;
}
I'm new in jQuery and used it right now for a navigation, that slides in and out in mobile or small views. That works fine and correct, but I'm using a plus-icon to open a submenu, that changes into a minus-icon, when the submenu is opened.
But it doesn't change back into the plus-icon, when the submenu is closed.
The code is the following:
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$(this).next('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
});
});
I think the "interesting" part might be the second function, the first is still for a hamburger-icon, that opens the navigation, that works (okay, it doesn't show a sliding animation, what the second one do... no idea, why it don't works...).
So the second part is for the plus. When I click on the plus, the submenu slides in and the plus changes to the minus, but when I click back to the the minus it doesn't change back to the plus.
Has somebody any idea why it doesn't work or can explain me, how I can do it work?
Regards,
Markus
The problem is that your selector is trying to find a span with both plusicon and vertical classes but after the first call to this:
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
wich removes said classes, it is not able to find your target span.
To work around this you could assign an id (iconId on the next example) or another class to your icon so it can be allways found
$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
...
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('#iconId').toggleClass('plusicon vertical');
});
Do this :
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
$icon.removeClass("CLASS YOU WANT TO GET RID OF");
$icon.addClass("THE CLASS YOU NEED");
else{
$icon.addClass("THE CLASS YOU WANT TO ADD");
}
});
I am at work now so pardon any typing errors.
You basically need to check whether the class that changes the icon to a MINUS symbol is still active - if so you change it back.
I hope it will help.
Points:
to find element good to use find();
better toggle 1 class to show hide element like "show" in example;
With elements inserted with js code better use .on() (for future);
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).find('.plusicon').toggleClass('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.plusicon {display:none}
.show {display:block!important}
</style>
<ul>
<li id="menu-toggle" class="level_2">Toggle</li>
</ul>
<ul id="navigation-main">
<li>test</li>
</ul>
When I click the href, I want to display the image and description from the target id. Can someone correct this code for me and show me how to do it right? Thank you very much!
HTML:
<div id="gallery"><img/></div>
Click me
jQuery code:
var datas={
"images":[{ "src":"gallery/panorak.jpg",
"title":"PANORAK",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"panorak",
},
{
"src":"gallery/kamoa.jpg",
"title":"kamoa",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"kamoa",
},
]};
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
var list=$("<ul/>");
gallery.append(list);
datas.images.each(function(i,j){
list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
});
});
Any help is greatly appreciated! Thank you very much!
I have made some changes to your code:
http://jsfiddle.net/T5r6D/
Have a look at my jsfiddle link for all updates.
You had some structure in flow issues and javascript error.
I am adding all image in array using normal for loop. once loop is done, i wrap images with <li> and adding the list to the stage.
Keep in mind that images will not be shown coz it is not on the jsfiddle server. Try it on your side.
UPDATE
http://jsfiddle.net/T5r6D/1/
So the new update does not hide the full container.
The anchor #tag [href] will be matched with the images title tag. So once clicked on a button it will hide the image that matches.
Try this:
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
$('a').click(function(){
var list=$("<ul/>");
gallery.append(list);
$.each(datas.images, function(i,j){
var img = $("<img/>").attr("src",datas.images[i].src);
list.prepend($("<li/>").append(img));
});
});
});
If you want to trigger events when something is clicked, you can use click() function. And I fixed each() function part. Check this documentation. And I split some code to improve readability.
I have the code below working like a charm:
var div = $('#div');
div.html('<div>one line</div><div>another line</div>');
div.slideDown('slow');
But the problem comes when I need to change the content (the number of lines):
div.html('<div>one line replacement</div><div>another line replacement</div><div>third line</div>')
This transition is too fast. How to animate this?
You can add an invisible span to the html:
<span class="foo" style="display: none">some other lines</span>
And then fade them in:
$("span.foo").fadeIn('slow');
Going by your edit, you may also want to consider:
div.slideUp('slow'); // you may want this to be 'fast'
div.html('some other lines');
div.slideDown('slow');
A wrinkle on Daniel Sloof's answer:
div.fadeOut('fast', function() {
div.html(html);
div.fadeIn('fast');
}
This will ensure your first animation is complete before proceeding. In my current case at least, fading makes a nicer experience than sliding.
Maybe if you put the extra lines into a div with display:none style, then you can fade in that div, something like this (concept - code not tested):
div.html("<div id='next_line' style='display:none'>some other lines</div>");
$("#next_line").fadeIn('slow');
If you want to make it take a certain time, then:
div.slideDown(numberOfMilliseconds);
Thomas mentioned "slideDown(numberOfMilliseconds)". I have tried it and jquery's doc defined the speed in milliseconds is the time taken to execute the amimation.
In that case, 1 line or 10 lines will take the same amount of time to slide. If you know the number of line, perhaps you can add in a multiplier, e.g. slideDown(lineCount * speedInMS)