Basically I have three images (call them img1, img2, img3) with three menus associated with each. (menu1, menu2, menu3)
When a user clicks img1, menu1 should pop up with three radio button selections (rad1, rad2, rad3). Say the user clicks rad2, menu1 should then hide and img2 should appear (but rad2 should still be selected). When img2 is clicked, menu2 then should show up with rad2 selected. Then if rad3 is clicked, menu2 hides and img3 shows up (but rad3 is still selected). And so on and so forth.
How to code this in javascript?
Here is an example of how to show a hidden div by clicking on an image.
<script language="javascript">
function showDiv() {
mydiv = document.getElementById('div1');
mydiv.style.display = 'block';
}
</script>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<img src='img.gif' onclick='showDiv();'/>
It should be as easy as:
function img1clk() {
menu1div.style.display = "block";
}
function menu1radclk() {
menu1div.style.display = "none";
img1div.style.display = "block";
menu2div.style.display = "block";
}
and so on. You will have to initialize the elements so their onClick property is pointing to the correct function, but thats simply
img1div.onclick = ing1clk();
or in html
<div onclick="img1clk()"><img src="..."></div>
Hope this helps ya!
This becomes pretty easy if you use jQuery's built-in methods, such as show() or hide(). Don't re-invent the wheel and all that :)
If all 3 menus are essentially the same but just look different why not bring up the same menu every time but change its css class?
Also, I couldn't agree more that jQuery is the way to go. The jQuery site's own documentation I find a bit lame, but once you've got around the basics it's really intuitive.
Related
I have a page (e.g. "page1") with multiple divs and some are nested within other divs. All divs are hidden by default and toggle on by clicking a specific link (or off when clicked again). To see a nested div, you first have to open the outer div.
Reduced example is here
Now my customer wants to have a link from another page (e.g. "page2") to a specific nested div on page1 and show it. This means that the outer div has to open too. How can this be accomplished?
With
clickfordivid5
The nested div opens but stays hidden of course, since the outer div is still hidden. Can I toggle both divs with on link?
Thanks so much!
Additional info:
This script is used:
<script type="text/javascript">
function toggle(id) {
var el = document.getElementById(id);
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
</script>
and then
<a href="javascript:toggle('divid5');">
with
<div class="ToggleTarget" id="divid5">
There are a lot of short and better ways to accomplish it with jQuery ,but I checked your site you are not using jQuery library.
To accomplish it with javascript add a class to all the tags which needs to be opened at the same time, for example add a class called same to child and its parent div as well and keep the display of that class as none(add .same{display:none} in your css file).Now add following code at the footer of the webpage having those divs:
<script type="text/javascript">
if(window.location.hash.substring(1)){
var cols = document.getElementsByClassName(window.location.hash.substring(1));
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'block';
}
}
</script>
On the other page add the hash link how you already added but with the class which needs to be kept open:
clickfordivid5
It should work.
Using: VS 2013, ASP.NET (VB) Webforms.
Upgrading WebForms web site from .NET 2.0 to .NET 4.5 and adding mobile-friendliness for Google support.
Created a button in Top right corner like this:
<a href="#" onclick="toggleMenuDiv();">
<img class="headerimg-r" src="/images/MenuBtn6464.png" />
</a>
The javascript looks like this:
function toggleMenuDiv() {
var menu = document.getElementById('menu');
if (menu.style.display == 'none') {
menu.style.display = 'block';
}
else {
menu.style.display = 'none';
}
}
the element with id "menu" looks like:
<div class="dropdownmenu" id="menu">
However, to drop the menu down I need to touch twice and not once. All menu links work properly without multiple touches.
Feel free to see it yourself. Hit http://www.pedfast.com from a mobile device and give it a try.
I know I'm missing something simple; can someone point me in the correct direction?
Thanks!
Maybe the menu.style.display not equal to none at the beginning?
So, first time youre you click the menu you will set the display to none. And second time the display are none and thats the reason why it works at the second click!
I think you need to check if the display not equal to block then set it to block!
Try this:
if (menu.style.display != 'block') {
menu.style.display = 'block';
}
else {
menu.style.display = 'none';
}
EDIT
Just look at #Billy Purvis answer. You can also add .toggle() instead of .show() if you want to hide the menu again.
The problem is that the div with the attribute id === "menu" have not the value display: none; as style attribute, so basically at the first click your code is assigning to the element that value, and then, in the second click the value display: block
Extracted from the linked page:
<div class="dropdownmenu" id="menu">
It should be
<div class="dropdownmenu" id="menu" style="display: none;">
Here, I created a jsFiddle showing use of jQuery. It's cleaner and easier to understand and only relies on a single click.
I couldn't recreate yours without more code, so I create an example to show the logic, it should be easy to use the logic in your example.
$("button").click(function(){
$(".menu").show();
});
Once the button (or a tag) is clicked, it'll show the menu. Putting this css on menu hides it until it's needed
.menu {
display: none;
}
http://jsfiddle.net/yhf3dfcs/
I have a WP page with a main div area and 2 buttons above it.
I have some JS which is meant to:
On page load, show a list type view of posts in the main div
When you press the 'gallery view' button, swap that main div content to the gallery view and hide the list view
when you press the list view button, swap the main div content back to the list view and hide the gallery view
Further pressing them continues to swap the div content
The JS I have nearly works. On page load it shows the list content. However on the first press of the gallery button, it doesn't hide the list view. But if you then press the list view button again, it works and the gallery view does get hidden and then further presses of buttons, it continues to work as it should.
It's just that first div switch where it doesn't hide the div that's the issue.
Here's the relevant JS, CSS and HTML:
JS:
<script>
var _targetdiv = null;
function showdiv(id) {
if(_targetdiv)
_targetdiv.style.display = 'none';
_targetdiv = document.getElementById(id);
_targetdiv.style.display = 'block';
}
</script>
CSS:
.hidden {
display: none;
}
HTML:
<div id="project-view-controls">
<a onclick="showdiv('project-image-archive');" id="project-gallery-btn" class="project-hide-btn">Link</a>
<a onclick="showdiv('project-list-archive');" id="project-list-btn" class="project-hide-btn">Link</a>
</div><!-- #project-view-controls -->
<div id="project-image-archive" class="hidden">
<p>Image view view here</p>
</div><!--#project-image-archive-->
<div id="project-list-archive">
<p>list view here</p>
</div><!--#project-list-archive-->
I'm not sure why it's just not working on the first instance of the button being pressed but it works after that.
Any help would be greatly appreciated!
The first thing I want to answer, is your question, why it is not working on the first button click. Its pretty simple, so lets have a look at your JS.
var _targetdiv = null;
function showdiv(id) {
if(_targetdiv)
_targetdiv.style.display = 'none';
_targetdiv = document.getElementById(id);
_targetdiv.style.display = 'block';
}
First you set the _targetdiv to NULL. The first time you click on a button and your function showdiv is called. The first time you call this function your if-statement is false, cause _targetdiv is null, so your code jumps to the next line _targetdiv = document.getElementById(id); and execute it, so _targetdiv is now set and will be displayed. So the second time you call this function _targetdiv is still set, so it can be hidden trough your code, cause your if-statement is true.
I would change your Javascript to something like this:
function showdiv(obj){
// First set both elements invisible, so nothing is displayed
document.getElementById('project-image-archive').style.display = 'none';
document.getElementById('project-list-archive').style.display = 'none';
// Now show only the div that is requested
document.getElementById(obj).style.display = 'block';
}
What the Javascript now does is, it hides both elements, so that nothing is displayed and directly after that it takes the id from the given object and displays it.
I hope this helps you a bit.
I want to show 2 links - Show and Hide. When I click on Show, Show should be hidden and Hide should be visible and when I click on Hide, Hide should be hidden and Show should be visible. How can I achieve this in html?
with jquery in the head
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
and an id for each button
<input type='button' id='show' value='Show' />
<input type='button' id='hide' value='Hide' />
you can do it something like this untested code...
<script type='text/javascript'>
$(function(){
$('#show').click(function(){
$('#hide').hide()
})
$('#hide').click(function(){
$('#show').hide()
})
})
</script>
Do you really only want to hide "hide" when "show" is clicked and vice versa? Because that is what you asked for, but it doesn't really sound as a "standard" (toggle) behaviour.
But here it is:
See this snippet.
HTML:
SHOW
HIDE
JS:
var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");
showElem.onclick = function() {
hideElem.style.display = 'none';
}
hideElem .onclick = function() {
showElem.style.display = 'none';
}
Instead of .style.display = 'none'; you can use .style.visibility = 'hidden' which will still hide the link, but there will be empty space instead of it and it won't really completely dissapear (see this snippet).
Update: Based on discussion in the comments section new simple example was created (see this) that have more "standard" behaviour. In case the page is expected to be heavy on effects or other javascript functionality (like Ajax) I would recommend to use 3rd party library like jQuery to simplify the implementation - see answer by Billy Moon.
Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue.
I have two forms and only one will be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.
One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1');
var $jtest2 = $j('#test2');
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
</script>
HTML
<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>
<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>
Note: class="hide" is style="display:none"
Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.
Look at the code below, added comments on why
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
//The following is inside the click so I do not get added until the first click
//and added after every click so I multiply!
//Hence why it takes 2 clicks
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
You should be doing something like this
$j("#button1, #button2").live('click',
function(){
//figure out what button was clicked.
if(this.id === "button1"){
var btnA = $j(this);
var btnB = $j("#button2");
var divA = $j('#test1');
var divB = $j('#test2');
}
else{
btnA = $j(this);
btnB = $j("#button1");
divA = $j('#test2');
divB = $j('#test1');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button').removeClass('light_button');
btnB.removeClass('dark_button').addClass('light_button');
}
);
jsfiddle example