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
Related
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?
I have 90+ divs with an image/icon in each div. I want it so that when I click one of them, that image appears in another div. What would be a decent way to do this? I don't know much about JS yet, so a little example of this with HTML would be appreciated, also limited to html5, Ajax and js.
EDIT: I should clarify that the div I want the content to go into is already made, it doesn't have to be created as well.
<link href="CSS/mainSource.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="display()">
<div id="testBox">
<div id="contentScroller">
<!-- I want to click one of these... -->
<div id="ahri"><img src="images/LoLchamps/Ahri.png" width="64" height="64"></div>
<div id="akali"><img src="images/LoLchamps/Akali.png" width="64" height="64"></div>
<div id="alistar"><img src="images/LoLchamps/Alistar.png" width="64" height="64"></div>
<div id="amumu"><img src="images/LoLchamps/Amumu.png" width="64" height="64"></div>
<!-- ...and clone the div OR content from clicked div/image into a div that I'll set up below the clear fix -->
<div style="display: block; clear: both;"></div>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('testBox');
</script>
</body>
</html>
Thanks.
- Ken B.
Try this (you need Jquery libary loaded)
$(document).ready(function () {
$("div.selecters").click(
function () {
$("#clone").html($(this).html());
});
});
This is an example, it would not work on your HTML unless i guessed lucky with my classes and id's
Here is a DEMO
read about :target in css3
its pretty easy
with CSS3 no much use of JS
read a simple but great tutorial
On css3-tricks
and the demo
it really worth reading
<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 ;)
Hi i hope someone can help. i want to hide the fragment identifier from the address bar so instead of:
www.mydomain.com/example.html#something
i just get:
www.mydomain.com/example.html
when i click on an anchor tag.
I have looked at lots of related questions and forums but still can't quite figure it out. I'm pretty sure i should be using something along the lines of:
window.location.href.replace(/#.*/,''); //and or .hash
put just cannot figure it out.
localScroll plugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.
but when i try and do it myself (bit of a novice) i get crazy to no results.
below is some basic example script i would like it to work with:
<style>
.wrap{
width:300px;
height:200px;
margin:auto;
}
.box{
width:300px;
height:200px;
position:absolute;
display:none;
}
#one{background:red;}
#two{background:blue;}
#three{background:green;}
.load{display:block;}
</style>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="wrap">
<div id="one" class="box load">This is Box 1</div>
<div id="two" class="box">This is Box 2</div>
<div id="three" class="box">This is Box 3</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("ul li a").click(function(){
$("div.box").fadeOut(1000);
$($(this).attr('href')).fadeIn(1000);
});
});
</script>
</body>
Add
return false;
at the end of your click function, it will stop this event propagation
the replace function returns a new string, it doesn't operate on the old one. You need to use: window.location.href = window.location.href.replace(/#.*/,'').
However, this will not have the expected effect, as changing window.location.href in any way that's not just adding or changing a hash tag causes a page reload.
The localScroll plugin works by searching for the hashtag and using the jQuery scrollTo plugin to scroll to the location, and preventing the default behavior of the browser when you click on a link with a hash tag. They haven't actually changed the URL to remove the hash, they've prevented it from ever appearing.
The best you can do if you want to remove the hash from the URI is to keep just the # at the end:
window.location.href = window.location.href.replace(/#.*/,'#');
Although in some older browsers, even this will trigger a page reload (only very old browsers, though).
try this....it will remove # globally in your url
window.location.href.replace(/\#*/g, "")
here is DEMO
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() {