<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 ;)
Related
We need to install Google Tag manager code right away after <body> and before any others tags (to avoid warnings from google tag assistant).
But featherlight creates it own <div class="fm-outer">.
How can we add code between <body> and <div class="fm-outer">?
Thanks.
<body>
...... we need this place
<div class="fm-outer"> ....
You can create some <div class='put-featherlight-here'> where it suits you and specify '.put-featherlight-here' as the root option.
Hopefully I understood you answer.
If not, provide a jsfiddle.
There are a lot of posts on this site with the same title, but none of them helped with my problem. I'm trying to do a simple thing with jQuery, and it's not doing anything, which leads me to believe that jQuery isn't even properly linked. But I'm doing exactly what I've always done. It's supposed to change the unordered list in this div to change its background color to orange. It doesn't change at all, though. I even tried to use a console.log to see if even that would work. It didn't. Can someone check this out?
My code :
<script src="jquery-1.12.0.js">
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
<div id="contentleft">
<h3>My List Is Awesome</h3>
<ul>
<li>Full Sail</li>
<li>CNN</li>
<li>YouTube</li>
<li>No link here.</li>
</ul>
</div>
You can't put code inside <script> tag that has an src.
Use two script tags
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
Don't try to use one <script> tag with both a src attribute and internal contents. Break it into two tags, like this:
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
A <script> with both a src and internal contents will give unpredictable results. You might want to read this post for more information.
I chose Swipebox as my lightbox because the requirements that I want is that it is swipable in mobile devices ad is responsive.
I mainly used this for images. However, I have a use case where I want to use Swipebox to show HTML.
Can this be done?
If this feature is not supported by Swipebox, are there any alternatives that support the featureset that I am looking for(swipeable + responsive + can show HTML)?
Swipebox can display inline content. Probably is not documented but you can view it in this issue answer:
https://github.com/brutaldesign/swipebox/issues/248
...
...
<div style="display: none">
<div id="slide1">Slide 1 Content</div>
<div id="slide2">Slide 2 Content</div>
</div>
I use the option "afterOpen: function () {}" clean the content of swipebox and put my content there. Here is my code:
var html = $('the HTML');
$('.swipebox').swipebox({
afterOpen: function () {
$('#swipebox-slider').empty();
$('#swipebox-slider').append(html);
}
});
I found this one (bxSlider) but I have not tried it yet. It claims to support what you need.
Perhaps your CSS isnt loaded correctly.
Check to make sure that you have the following code within your head:
<link rel="stylesheet" href="source/swipebox.css"/>
Hope this helps,
#_Sub
Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.
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