I have the following div element and within it I load images. I only want to show the div#main-slider when all the images have loaded within it:
I have tried the following jQuery:
$(window).load(function() {
$('#main-slider').animate({'opacity':1}, 300);
});
But it shows the div even when all the images aren't loaded.
CSS
#main-slider,
#main-slider #bo,
#main-slider #bg,
#main-slider #hugo{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
HTML
<div id="main-slider" class="flexslider">
<div id="boss" class="tab-container">
<ul class="slides boss-slides clearfix">
<li id="1">
<img src="mobilelp/img/boss_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/boss_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/boss_mobile_3.png" />
</li>
</ul>
</div>
<div id="bo" class="tab-container">
<ul class="slides bo-slides clearfix">
<li id="1">
<img src="mobilelp/img/bo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bo_mobile_3.png" />
</li>
</ul>
</div>
<div id="bg" class="tab-container">
<ul class="slides bg-slides clearfix">
<li id="1">
<img src="mobilelp/img/bg_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bg_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bg_mobile_3.png" />
</li>
</ul>
</div>
<div id="hugo" class="tab-container">
<ul class="slides hugo-slides clearfix">
<li id="1">
<img src="mobilelp/img/hugo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/hugo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/hugo_mobile_3.png" />
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li>Previous
</li>
<li>Next
</li>
</ul>
</div>
I also had this requirement. I found success using the imagesLoaded plugin.
Pseudo code based on what I currently use in my application:
$('#main-slider').imagesLoaded({
progress: function (isBroken, $allImages, $loadedImages, $brokenImages) {
console.log('ok: ' + $loadedImages.length + ', bad: ' + $brokenImages.length);
},
done: function ($images) {
$('#main-slider').animate({'opacity':1}, 300);
}
});
It can get pretty simple (fiddle):
$(function () {
var $img = $(".waitFor img"),
n = $img.length;
$img.on("load error", function () {
!--n && $(".waitFor").fadeIn(300);
});
});
This effectively waits for all images to either load or error out before fading in the entire container.
This is a simple enough problem that I wouldn't want to use a plugin for it. It's actually quite simple, since jQuery provides a convinient .load() function to all image elements:
$(function(){
var loaded = 0;
var total = 0;
$(".waitFor img").each(function(i, e){
total++;
$(e).load(function(){
loaded++;
if(loaded == total)
console.log("Everything loaded");
});
});
});
JsFiddle
Related
I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});
I have a website and we're trying to setup a continues looping similar to this stack answer OR What Lies Below website
In our website we also have some elements that are being parallaxed. The parallaxed elements all have the class name "parallax". When I'm cloning and appending the cloned content, it's using the parallax class name and I need to get rid of it. So I thought I could just
JS
var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");
HTML
<body>
<main class"content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
</body>
But the appended content on the site is still adding the "parallax" class name. What simple thing am I forgetting?
clone() return jQuery object so you can use it to find and remove class
Try this :
var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');
.parallax {
border: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
Don't include the period in the class name on the removeClass function.
var updatedClone = $(clone).find('.content').removeClass('parallax');
https://api.jquery.com/removeclass/
I am working on a simple gallery for my site.
Demo: http://jsfiddle.net/fdr6y6y7/
I have a large image that changes when you click a thumbnail underneath it.
However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.
For example, if I click the 2nd thumbnail image the hyperlink inside the largeimg div should really change to http://placehold.it/250x250.
Can I use jQuery to do this?
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<img src="http://placehold.it/200x200" />
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<img src="http://placehold.it/100x100" />
</li>
<li>
<img src="http://placehold.it/100x100" />
</li>
</ul>
</div>
</div>
</div>
Thanks to the Anon SO user for this: http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>
I signed up yet so sorry for such a simple question!
I want tabs that switch automatically every 5 seconds, for example, how to implement it?
my code:
html code:
<div class="tabs">
<ul class="tab-links">
<li class="active">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<img src="first.jpg" alt="" />
</div>
<div id="tab2" class="tab">
<img src="second.jpg" alt="" />
</div>
<div id="tab3" class="tab">
<img src="third.jpg" alt="" />
</div>
<div id="tab4" class="tab">
<img src="fourth.jpg" alt="" />
</div>
<div id="tab5" class="tab">
<img src="fifth.jpg" alt="" />
</div>
</div>
</div>
js code:
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
thanks in advance!
Perhaps something like:
var current_tab = 1;
var number_of_tabs = 5;
window.setInterval(function(){
if(current_tab == number_of_tabs){
current_tab = 1;
}else{
current_tab++;
}
$('#tab'+current_tab).show().siblings().hide();
$('#tab'+current_tab).parent('li').addClass('active').siblings().removeClass('active');
}, 5000);
Fiddle: http://jsfiddle.net/Ve4sg/1/
this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>
$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});
Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>
Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});
You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});