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.
Related
I currently have a div in my HTML that is initially hidden (using display:none).
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
$("div.fulladdress").show();
});
});
However, if Javascript is disabled, the full address will never display. How do I resolve this?
Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.
Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.
<noscript>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!
</p>
</div>
</noscript>
You can try something like this.
If javascript enabled - Hide div on document ready and then show on click event
If javascript disabled your document ready function wont execute and it wont hide the div
$(document).ready(function() {
$("div.fulladdress").hide();
$("#button").on('click',function(){
$("div.fulladdress").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
<button id="button">display</button>
</div>
Try this
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled.
</div>
</noscript>
If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.
You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?
Hope this helps!
I have the below html. I am trying to access the div tag warningMessage under scripts.
<script id="notePopup" type="text/x-kendo-template">
<p class="notePopupMessage">Please enter a note:</p>
<input class="textNote k-textbox" type="text" maxlength="512" />
<div class="buttons">
<button class="add k-button">Add</button>
<button class="cancel k-button">Cancel</button>
</div>
<div id = "warningMessage" style="visibility: hidden" >
<p id="warningMsg" > Status change action note would not be saved until Save button is selected. </p>
<div>
</script>
I tried to access div id warningMessage and set the visibility to not hidden on certain events by doing something like this$("#warningMessage").show(); and it did not work.
What do we have to do different in order to access this div tag. I suspect its behaving like this because it is under a script tag.
Here is the Fiddle link.
Try running the kendo script first, then access the element by running the jQuery function you mentioned? I guess when the kendo script is finished, that template will be converted to valid html, and your div will be accesible for jQuery.
It won't work because you first set a visibility:hidden.
So either you set it to visible when the event occurs, or you first display:none this div and make it display:block (using show(), fadeIn() and so on) for this specific event:
Here is a fiddle for you: https://jsfiddle.net/liototo/jnmyswy4/1/
I set the warning div to:
#warningMessage{
display: none;
}
The jQuery part is then as follow (just an example):
$('.add').on('click' , function(){
if ($('.textNote').val())
$('#warningMessage').show();
else
alert('enter something!');
});
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
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();
});
I am making a HTML page, with JavaScript. In the HTML is the first content of a div, but when the user clicks a button, the text changes.
The text in the div is actual content, and needs to be findable by Google. The text is now stored in a simple variable in the JavaScript file.
Questions:
- Is that text indexed?
- Are there any better ways to store the text?
You can keep the text in a div and then change the visibility to hidden
<div id="content" style="visibility: hidden;">
Div content
</div>
Then in javascript,
document.getElementById("content").style.visibility="visible";
should make the document visible. Since the text will be there in the source for the page, it will be indexed by google, but will be displayed only when you run that line of javascript.
Storing the text in js variables is generally not a good idea.
You can put this text in a hidden div instead, like this:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button onclick="replace_text();">
<script type="text/javascript">
function replace_text() {
var target = document.getElementById('target');
var second = document.getElementById('second');
target.innerHTML = second.innerHTML;
}
</script>
In that case your second text will be indexed by Google.
Of course you better use any js framework like jQuery or Mootools.
Mootools example:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button id="button">
<script type="text/javascript">
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('target').set('html', $('second').get('html'));
});
});
</script>
Javascript is not searched, see googles answer:
http://www.google.com/support/customsearch/bin/answer.py?answer=72366
I found a good article about hide/display content only with CSS. It's working without Javascript: http://www.devinrolsen.com/css-hide-and-display-content/