See demo # https://timeline.knightlab.com
Advance one slide to Ada Lovelace. As you can see in this JSBin, wrapping this image with jQuery is simple. However, I'm not able to do it on the actual website that I've integrated Timeline JS3.
HTML:
<div class="tl-media-content"><img class="tl-media-item tl-media-image tl-media-shadow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/713px-Ada_Lovelace_portrait.jpg" style="max-height: 412px;"></div>
<div class="tl-credit" style="width: 286px;">Wikimedia Commons</div>
<div class="tl-caption" style="width: 286px;">Portrait by Alfred Edward Chalon</div>
JS:
jQuery(document).ready(function($){
jQuery('.tl-media-item').wrap('<div class="wrappingdiv" />');
});
CSS:
.wrappingdiv {background:red; padding:10px;}
I've tried refining the order of execution (ensuring it executes after timeline.js loads), but it still doesn't seem to work.
Any ideas?
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
jQuery noob here. Sorry if the question is really simple, I haven't been exposed to much jquery, though I am trying to learn.
I am attempting to move a DOM Element from one place to another, but I seem to be running into some errors.
When I attempt to test to see if the DOM exists I get indications that the element is not in the DOM:
if (jQuery('.ls-yourlogo').length) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
I am trying to move .ls-yourlogo into .ls-inner.
I have tried several different things including:
jQuery('#layerslider_1').children('img').appendTo('#layerslider_1').children('.ls-inner');
also
jQuery('.ls-yourlogo').appendTo('.ls-inner');
I do know that the .ls-yourlogo and the .ls-inner DOM elements are both created with jQuery. I'm not sure if that is what is causing the problem.
I am currently working with the Layer slider plugin for WordPress: http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246
<div id="slider">
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<div class="ls-wp-fullwidth-container" style="height: 317px;">
<div class="ls-wp-fullwidth-helper" style="height: 317px; width: 1349px; left: 0px;">
<div id="layerslider_1" class="ls-wp-container ls-container ls-noskin" style="width: 1050px; height: 317px; margin: 0px auto; visibility: visible;">
<div class="ls-webkit-hack"></div>
<div class="ls-inner">
<div class="ls-layer ls-active">
<img class="ls-s-1">
<p ></p>
<p ></p>
</div>
<div class="ls-layer" >
<img class="ls-s-1">
</div>
<div class="ls-circle-timer"></div>
<div class="ls-loading-container"></div>
<div class="ls-thumbnail-wrapper"></div>
<div class="ls-shadow"></div>
<img class="ls-yourlogo">
</div>
</div>
Thank you for your time.
Finally found a solution for moving an element the Layer Slider DOM.
jQuery('#layerslider_1').layerSlider({
hoverPrevNext : false,
cbInit : function(element){
jQuery('.ls-yourlogo').appendTo('.ls-inner');
jQuery('.ls-thumbnail-slide > a').addClass('ls-thumbnail-style');
}
});
The ID is of your layer slider that exists on the page. Mine happened to be 1 so its #layerslider_1. The next important part is the callback cbInit, inside this function you can make your appends and what ever other markup changes you want to make to the DOM.
Hope this helps someone.
try this:
suggestion instead of you typing jQuery everytime use $ instead it makes it easier for you.
if ($('.ls-yourlogo')) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
Also i would suggestion using #ids than classes because ids are lot faster to get in Jquery than classes. And Make sure you call your the script that makes .is-yourlogo class first before checking if it exits.
see this jsfiddleThe </div> tags in your html are not properly closed off, that might be contributing to part of your problem. If I close a few off and run my code, it removes the element with the class='ls-your-logo' and appends it to the <div class='ls-inner'> which ends up being the same place as it was before. Perhaps if you look at my fiddle, you can better close the div tags to how you want it to properly look
I need some help.
I tried to make a simple project on JSFiddle, but I can't get it to work.
http://jsfiddle.net/reUyp/2/
Here's the code
HTML:
<div id="img0">
<b class="i01">ONE</b> <b class="i02">TWO</b> <b class="i03">THREE</b>
</div>
<div style="width:200px; height:500px; background-color:red;" id="i01"></div>
<br>
<div style="width:200px; height:500px; background-color:blue;" id="i02"></div>
<br>
<div style="width:200px; height:500px; background-color:green;" id="i03"></div>
<br>
JavaScript:
$(function(){
$('#img0 b').click(function(){
CL=$(this).attr('class')
st=$('#'+CL+'').offset().top;
$('body,html').animate({scrollTop: st}, 500);
return false;
});
});
What I want is that when you click on one of the words, the page should scroll to the corresponding colored div. But it doesn't...
What am I missing? I'm sure it's a really stupid thing...
Oh, and is there actually a better way to accomplish this?
Since you are using jQuery, you have to include it into your jsFiddle project. Select it in the top left corner and your sample will work.
Also in your own project you have to include jQuery with eg:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
inside the head part of the html page.
You're trying to use jQuery syntax but haven't loaded jQuery in the Frameworks & Extensions sidebar. Select jQuery 1.9.1 and your code works just fine.
See this, this is your correct answer.
Fiddle here
I have been trying to get a jQuery slideshow (on click) working for a while now and can't figure out where I'm going wrong. I'm working with Ryan Florence's jQuery slideshow nav here:
http://ryanflorence.com/jquery-slideshow/demos/slideshownav/
I've put together a jsFiddle here:
http://jsfiddle.net/hAvXt/3/
I've made sure to include the jQuery UI. There are three javascript files incorporated in his example on his site (demo.js, jquery.rf.slideshow.js, jquery.rf.slideshownav.js). I've taken them all and put them into the javascript section of the JSFiddle.
Basically, when I click on the correct button, it updates the 'slideshow' div to the right content but it's not giving me the transition. At first I thought it was because I was using 'divs' instead of images but I've used his simpler slideshows in the past with divs and it works fine. Thanks so much for the help.
This is my nav bar:
<div class="slideshow" id="slideshow" style="width:1105px; height:1402px;">
<div id="red" style="background-color:red;height:1402px; width:1105px;">TEST 1</div>
<div id="green" style="background-color:green;height:1402px; width:1105px;">TEST 2</div>
<div id="blue" style="background-color:blue;height:1402px; width:1105px;">TEST 3</div>
</div>
And this is the implementation of the jQuery function:
$(function(){
$('#slideshow').slideshownav({
transition: 'push(#{direction})',
mode: 'vertical',
navSelector: '> ul > li > a',
duration: 400,
autoPlay: false
});
});
I had it set up weird (for anyone who has this problem in the future). With that slideshow, the actual anchor href doesn't do anything which was confusing in the source code on the site for this demo.
It has to do with the order of the anchor tags and the order of the slides. The first one corresponds to the first one, etc.
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {