In this example. I need my div is open if page is change or refresh.
I have given my HTML and Javascript.
This is where my code is live http://jsfiddle.net/wasimkazi/fauNg/1/
$(".widget2").hide();
$(".box2").toggle(function() {
$(this).next(".widget2").slideDown(200);
}, function() {
$(this).next(".widget2").slideUp(200);
});
$(".inner").hide();
$(".box").toggle(function() {
$(this).next(".inner").slideDown(200);
}, function() {
$(this).next(".inner").slideUp(200);
});?
<div class="box2"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
<div class="inner" style="display: block; ">
<ul class="leagues">
<li class="even">Australian NBL</li>
</ul>
<div class="clear-both"></div>
</div></div>
</div>?
Use javascript coockie to save the Open and close state for each menu, and read the state when page loads. this is the only way to go since every time page is refreshed, everything is reset.
When you make a change, you can change what's after the # at the end of the url. Then when the page is reloaded, you read the value after the hash in $(document).ready() and make the changes accordingly.
You can use the is function to check if your div is hidden and show it
if($(".selector").is(":hidden"))
$(".selector").show();
Furthermore as #mikel said, put it inside document ready function for checking on pageload.
$(document).ready(function(){
if($(".selector").is(":hidden"))
$(".selector").show();
});
Related
I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.
If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).
I have a trash icon which user clicks on to delete current element from database. I want to make it work with ajax if user has javascript enabled. There are multiple items on page.
Don't know why but even after adding preventDefault, href works like regular href instead of performing ajax. It triggers ajax request without refreshing window only every second time I click on trash icon.
Do you know where is the problem?
$('.delete_bulletin').on('click', function (e) {
console.log('event');
e.preventDefault();
$.get($(this).attr('href')).done(
function () {
reloadBoardContent();
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bulletin_board">
<div class="bulletin_card">
<i>4. apríl 2018 14:50</i>
<h4>NAME</h4>
<p></p><p>htrhr</p><p></p>
<a class="delete_bulletin" href="/bulletin-board/delete/35/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
</div>
<hr>
<div class="bulletin_card">
<i>4. apríl 2018 14:49</i>
<h4>NAME</h4>
<p></p><p>fdsafdfs</p><p></p>
<a class="delete_bulletin" href="/bulletin-board/delete/34/"><img style="max-height: 20px" src="/static/bulletin_board/icons/trash.png"></a>
</div>
<hr>
</div>
I'm pretty sure (but needs confirmation) that your reloadBoardContent() is updating the div where this <a> is located.
If that's the case, the anchor will be replaced and the event won't trigger to the newly created ones.
The solution is to use delegate events, which will make it work for dynamically added elements.
Do this instead:
$('#bulletin_board').on('click', '.delete_bulletin', function (e) {
If you don't replace the <div id="bulletin_board" itself but only its contents, everything shall be fine from now on.
I have created a jQuery Dialog for storing a hidden image, which will only be triggered by clicking a link. Some of the codes are as followed:
<div id="dialogdialog" style="background-color: white;">
<div>
<div style="clear: right">
<a href="#" class="closeDialogButton">
<div id="fitClose" class='sprite x' style="float:right;"></div></a>
</div>
</div>
<div>
<div id="fitLogoBlack" class='sprite black-logo'></div>
<br/><br/>
<img id="fitTitle" src="img/fitguide_title.jpg">
<img id="fitLogoBlue" src="img/blue.png">
</div>
<div>
<img src="img/topbanner01.jpg">
<br/>
<img src="img/slim02.jpg">
</div>
</div>
<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>
<script>
$(function() {
$("#dialogdialog").dialog({
width: 900,
border: 0,
autoOpen: false,
modal: true,
resizeable: false,
dialogClass:"myClass"
});
$("#fitguidePic").on("click", function() {
$("#dialogdialog").dialog("open");
});
});
$('.closeDialogButton').click(function(e){
e.preventDefault();
$('#dialogdialog').dialog('close');
})
</script>
And the codes are working, the image can be hidden until I clicked on the link, however, occasionally when I refresh my page, I will see the hidden content appeared on the page for few seconds, but after the whole page is fully loaded, it will be hidden again. But this situation does not happened for every refresh.
I have no idea what this problem is caused. How can I stop the image popping up when refreshing? Thanks!
Add this to your CSS:
#dialogdialog {
display: none;
}
Because displaying of the page in the browser doesn't wait for Javascript to be fully loaded the dialog is sometimes visible, because it is visible by default. jQuery will later 'overwrite' this initial setting by attaching CSS directly to the element.
How can I stop the image popping up when refreshing?
By using vanilla js (raw js). Why ?
I have no idea what this problem is caused.
This is because jQuery (if properly set) is loaded only after the whole document has loaded. So when you refresh the image appear first and then the code hidding it is loaded after that. Anytime there is a delay and the loading is slow, you will see the picture before it is hidden if using jQuery.
Alt solution : you can load jQuery without waiting for the document to fully load but your code might break and this is generally a really bad idea. jQuery works only on whole documents.
display: none; on #dialogdialog
I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?
The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});
You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.
You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")
<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.
if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>
First of all, what my script does is allow me to swap divs by using a checkbox.
JS Fiddle Example: http://jsfiddle.net/yHTFF/8/
I'm seeking help with setting up cookies properly for this script. I'd like to set this up so that the div and checkbox the user leaves it at remains the same upon page reload.
Here's my script:
<!--HTML-->
<div id="ontopic_posts">
Content 1
</div>
<div id="offtopic_posts" style="display: none;">
Content 2
</div>
<input id="cbox_posts" type="checkbox"> show off-topics
<!--JQUERY-->
<script>
jQuery("#cbox_posts").click(function() {
if ( jQuery(this).is(':checked') )
{
jQuery("#offtopic_posts").show();
jQuery("#ontopic_posts").hide();
}
else
{
jQuery("#offtopic_posts").hide();
jQuery("#ontopic_posts").show();
}
});
</script>
Thanks!
You attach the event handler before the element exists.
Move the script tag after the input or wrap the script with $(document).ready.