Develop Reference

Moving a DOM Element in jQuery (Layer Slider)

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

Smooth scrolling page jump

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

Integrate jQuery zoom effect with magazine-flipping Javascript

I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>

in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs

Making links active in Javascript

I have some problems with Javascript. In fact, I'm just newbie in that script language so I need some help..
Q: how to make this link active:
something
this link is just link to the div which is located in index.html file, so there is no loading of page.
and here is the div
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>

Since you're just starting out, I'd suggest you use a library such as jQuery. So, if your HTML is like this:
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
<div id="box2" class="box">
<h3><a name="box2">something</a></h3>
</div>
<div id="box3" class="box">
<h3><a name="box3">something</a></h3>
</div>
And you have a CSS class called youarehere:
.youarehere { color:white; background:green; }
With jQuery you could write something along the lines of:
$(".box > a").click(function() { // when clicking any of these links
$(".box > a").removeClass("youarehere"); // remove highlight from all links
$(this).addClass("youarehere"); // add highlight to clicked link
})
In plain JS, it takes a bit more effort to achieve this. Do yourself a favor and don't reinvent the wheel - people have already taken care of this, so use the product of their labor to make your life easier.

a:active means when you click the link the css properties will apply on the link, instead of using a:active use
a.visited{color:red;}

To change the link text color on mouse over use the following css:
<style type="text/css">
a:hover{color:Red;}
</style>

scrollTo/localscroll.js not working at all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/script.js"></script>
script.js:
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
i don't understand what is wrong....help me! thnx

The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)
First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)
Second, your content div must have a fixed size, and overflow:scroll as CSS markup.
To see a working example, check out This JsFiddle i made for you

I remember using this plugin at some point and I think you need to specify a target
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});

Keep your menu wrapper as is and change the js conde to:
$(document).ready(function()
{
$('#menu').localScroll({duration:800});
}
);
And I don't think you need the content ID in content wrapper. That might help.

I had exactly the same problem.
Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!
So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.
See below my anchor.
<a class="anchor" name="myanchor"></a>
My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.
Hope this helps someone!

This worked for me: I was including the file twice.
In our header:
<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>
And in our footer:
<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>
Removing the second include solved the problem.
This happened due to merging of a new website design onto our existing one.

I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/
You should use:
$("html,body").localScroll({duration:800});
Duration is optional of course, but at least set html/body as a target ;)