I got a small script which toggles my nav. But I'm using the nav in more pages. I want jQuery to remember the toggle(show/hide) state so I can use it when navigating.
$(document).ready(function(){
$('ul.second').show();
$('ul.third').hide();
$('ul.first').show();
$('ul.first li.first a').click(function(){
//$('ul.second').slideToggle("");
$('ul.third').slideToggle("");
});
});
You could use either use cookie management or localStorage to store this info across your session. LocalStorage only works with html5 though.
Here's a good article on a plugin that features both, so you don't need to detect yourself if the browser is capable of localStorage or not:
http://upstatement.com/blog/2012/01/jquery-local-storage-done-right-and-easy/
You can also add a hash to the url and detect the hash after page refresh.
More details on hash here
http://benalman.com/projects/jquery-hashchange-plugin/
https://developer.mozilla.org/en/DOM/window.onhashchange
you can do it with slide function of jquery
just design the panel and flip element to your liking with css like this
<style>
.flip {
position:relative;
background-image:url("mybutton");
}
#panel {
background-image:("rabbitimage");
}
</style>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
</head>
<body>
<div class="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
Related
I have a volusion site. I want to add a scroll-to-top floating. I tried lot of js or css code but it doesn't work. Any suggestion? Thank you in advance.
You can try like this.
<style type="text/css">
.scrollToTop {position:fixed;bottom:100px;right:100px;}
</style>
<a class="scrollToTop" href="javascript:scrollToTop();">Scroll to top</a>
<script type="text/javascript">
function scrollToTop() {
$(window).scrollTop(0); // If you work with jQuery,
document.body.scrollTop = 0; // Or not.
}
</script>
I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...
Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
I think that it is not possible if you use remove().
But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other.
Have you tried detach()?. In the jQuery documentation says:
To remove the elements without removing data and events, use .detach() instead.
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute;. Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with #Ryuu's answer, don't bother with iframes at all is the best option.
I've done a simple menu using some HTML, CSS and Javascript. The main idea is that it should be hided until the user click on it, but the problem is that it won't start the page hidden and nothing happens when I click, just like if the Javascript won't active. Here is part of my files:
index.html
<head>
<link rel="stylesheet" type="text/css" href="style/sample.css" />
</head>
<body>
<script src="js/menu.js" type="text/javascript"></script>
<div id="container">
<div id="header">
<center>
<div class="leftMenu" onclick="toggleMenu()">Menu</div>
<h1>Test</h1>
</center>
<ul>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
menu.js
$(document).ready(function() {
$('#header ul').addClass('hide');
$('#header').append('<div class="leftMenu" onclick="toggleMenu()">Menu</div>');
});
function toggleClass() {
$('#header ul').toggleClass('hide');
$('#header .leftMenu').toggleClass('pressed');
}
sample.css
#header ul.hide {
display: none;
}
#header div.pressed {
-webkit-border-image: url(graphics/button_clicked.png) 0 8 0 8;
}
What I'm making wrong and how I can correct it?
I think at least part of the problem is that the menu toggle div you're creating is using the function toggleMenu() and not toggleClass().
EDIT: I made a jsfiddle that shows the changes I would propose to make it work properly: http://jsfiddle.net/avidal/dDDKz/
The key is to remove the onclick attributes, and use jQuery to handle the event binding for all current, and future matching elements:
$(document).ready(function() {
$('#header ul').addClass('hide');
$('#header').append('<div class="leftMenu">Menu</div>');
$('#header div.leftMenu').live('click', toggleClass);
});
function toggleClass() {
$('#header ul').toggleClass('hide');
$('#header .leftMenu').toggleClass('pressed');
}
Ok, a few things:
Make sure you have a doctype. You said this was just part of your code, so perhaps you do, but just to be sure, I'll point this out anyway. You can just use the html5 doctype (it is compatible with IE6 if that's a worry):
<!DOCTYPE html>
<html>
<head>...head stuff here </head>
<body> ...Body stuff here</body>
</html>
Make sure you are loading the jquery library. Again, maybe you already are, but just making sure your bases are covered here. I'd suggest putting it in your HEAD. You should also move menu.js out of the head and just below the closing BODY tag.
If you want the UL to start off hidden, you should have the default CSS for it display none. Otherwise, even if your script was working, you would see the ul for a moment before it became hidden as the page would first load and then the JS would apply the class. In that gap between page loading and JS applying your class, the UL will be visible.
Your scripts could really be optimized, and I apologize for not being more specific (shouldn't write these when I'm trying to get ready for bed), but I'll at least point out the most obvious fix here - make sure that you are calling the correct method. I see that in the HTML snippet you are appending, you are calling toggleMenu(), but in your actual JS, your function is called toggleClass. Change one of those so they match.