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!
Related
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");
});
});
I have a a link as below
link
and javascript function1 include submit form action
now I want to use JavaScript to prevent Ctrl + mouse click to open new tab on this a link for IE(>=6), FF, and Chrome.
Updated to fix
1. update href="javascript:void(0)"
2. update onclick="function1();return false;"
Note: I'm not using a JavaScript library such as jQuery or Dojo.
The A tag is used for links or references. If you mainly want a clickable function I would suggest to use the button tag and style it like a link with css.
For example, bootstrap does this with the btn-link class:
<button type="button" onclick="function()" class="btn btn-link">Link</button>
This has the advantage over using a span or div element that it is clear to browsers, search machines and screenreaders that this is supposed to be a clickable element.
If you want to execute a function on click of an element, use a div tag instead of an anchor tag
<div onclick="function1()" style="cursor:pointer">link</div>
EDIT: a div tag is a block element and will push the link to a new line. And as Jan has suggested move styles to a CSS. Used inline style for ease here.
<span onclick="function1()" style="cursor:pointer">link</span>
[Edited]
You can do whatever you want to do from within the event's function (onclick) and don't use href at all. For the mouse hover cursor effect use style="cursor:pointer".
example code:
<html>
<head>
<title></title>
<script type="text/javascript">
function fn(){
/* do something */
}
</script>
</head>
<body>
<a style="cursor:pointer" onclick="fn()">1234</a>
</body>
</html>
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
I'm looking for a wordpress plugin that hides to start with the when I click say an arrow image an ajax feature pops out with say a contact form inside and also another show hide feature at the bottom of the page to show and hide multiple divs.
Is there a plugin that can do all this?
My pages have to be editable for my client so it is impossible for me to build this into the theme. The javascript function needs to be part of a page.
I've found WP ShowHide Elements but this does not allow me to do it with multiple divs in the same placement.
Here's some of the script I'm using as allowed by the plugin in my pages
<p id="mytest">my text</p>
<p><a onclick="wp_showhide('mytest')" href="javascript:void(0);">my link</a></p>
<p id="new">new</p>
<p><a onclick="wp_showhide('new')" href="javascript:void(0);">new</a></p>
Thanks for your help
Regards
Judi
P.S. http://wordpress.digitalnature.ro/mystique/
Please notice the sidebar on this website, this is what I'm trying to achive but within the main page content
This short script works within a page but I want a swap div effect
How can I use this to work with multipe divs? - i'd like to change the visability of multiple divs all with the same space or div
<p><script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script></p>
<p><a onclick="toggle_visibility('foo');" href="#">Click here to toggle visibility of element #foo</a></p>
<div id="foo">This is foo</div>
<p><a onclick="toggle_visibility('too');" href="#">Click here to toggle visibility of element #too</a></p>
<div id="too">This is too</div>
I think I may have solved my own problem :)
Would love to know whether anyone can modify it so the 1st div is already open when the page loads
<p><script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script></p>
<p>link</p>
<div id="divID" style="display: none;">content</div>
<p>link</p>
<div id="new" style="display: none;">content</div>
To answer your edit: can't you just remove the display:none style from the original div?
If you need to do it in Javascript, chuck a showIt('divID'); line in after your function.
To do it properly, add it into window.onload:
window.onload = showIt('divID');
Or more properly, have a function that enqueues into the onload (like this).
Or probably best, use a framework :)