toggle outer div together with inner div - javascript

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.

Related

All the contents (of other pages) of my website sits under the same tab unless an user clicks on the tabs

I am having an issue with my newly published website. As soon as the site is loaded it shows all the contents including paragraph, videos (from other pages as well) etc.. under one single tab (in my case it HOME tab). But once any tab is clicked its fixed automatically. Please look here.
So, it's a problem! I want the contents previously fixed (shouldn't wait for an user click).
Now I am well aware of my design. I haven't used multiple pages link. I stored everything in my main index file and used the following jQuery code to just redirect them to the corresponding section (after clicking a corresponding tab):
Please help me to improve the code so that my page loads as I want.
I guess my issue is related with this piece of code:
/*Make the tabs work-begins*/
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/
Hide all the divs and then show only the first div inside #all_contents. This should do the trick:
/*Make the tabs work-begins*/
$(document).ready(function(){
//Hide all divs first
$('#all_contents>div').hide();
//Then show only first
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
/*Make the tabs work-ends*/
If you want to hide all of the contents initially then you should apply the css styles added by clicking home to your html rather than applying it on js load:
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
So this hides all pages except the one which was clicked by adding the style display:none; inline to all of the selected elements. Because tehy aren't hidden on page load, the site only works after clicking on a link. You should do the same, but add the style as a rule in your css rather than in-lining:
#all_contents > div {
display:none;
}

Hide/show divs for different page layouts JS issues

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.

Passing multiple values in Javascript OnClick, using those values in specific ways

While I've done some Javascript coding, I consider myself a more novice, Frankenstein-type coder, basically cutting and pasting with trial and error to see if I can get something to work...just a heads up on my honest assessment of my experience level.
I've got a unique thing I'm developing for, and hoping to get some help with Javascript. Here's what I'm trying / need to do: for a webpage based kiosk presentation, I'm using one HTML webpage, but with multiple sections whose visibility toggles on/off based on a Javascript I currently have that works fine. (I don't want to / can't use regular HTML pages with links because of how it ends up running).
The only problem with the above issue is that there's no easy way to create a 'back' or 'previous page' link for an end page that may have multiple ways to get to it. It won't 'know' where the user came from.
So here's what I'd like to do: pass 2 variables through my OnClick javascript function, the DIV name that needs to toggle on/off ... AND a 2nd variable of the current visible DIV name so that the next DIV that toggles on can 'remember' what the previous (and now invisible) DIV was so that there can be an accurate 'back' button.
Here's some sample code:
Each DIV section that turns on an off is setup like this:
<div id="sectionName" class="content">
</div>
These DIVs have buttons/links that are setup like this:
These run a Javacript:
function toggleVisibility(selectedTab) {
var content = document.getElementsByClassName('content');
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
So what I'm hoping is that there is a way to do something like this:
So that when that is clicked, the next DIV that turns on could also include a Javascript generated link based on that passed variable, something like:
Previous<br>Menu
I'm aware that Javascript toggling of DIVs on and off may not allow the generation of a dynamic Javascript link like the one I'm describing above, so I'm throwing this out there for some help from other, far more experienced programmers. Ideally, I'd like to try and fit everything into what I've created so far, so I don't have to start over from scratch. Any ideas?
Please reference this sample page:
www.gs3creative.com/test/
You could use location hashes (mypage.html#mydivid) and then use history.back() to handle 'back' navigation.
To stitch up the div's showing on the correct hash value....
var oldHash = '';
// fires when the hash changes
function hash_changed() {
var hash = location.hash.replace('#', ''); // get the div ID
var div = document.getElementById(hash); // find the content div on the page
var allDivs = document.getElementByClassName('content'); // get all of the content divs
// hide all the content divs
for (var i = 0; i < allDivs.length; i++) {
var thisDiv = allDivs[i];
thisDiv.style.display = 'none';
}
// only show the right one
div.style.display = 'block';
}
// this triggers the event
setInterval(function() {
// if the hash has changed, fire the function
if (oldHash != location.hash) {
oldHash = location.hash;
hash_changed();
}
}, 100); // call every 100 ms so that there is no lag
So if you set the navigation to 'mypage.html#sectionName' it would hide all other div's of the class 'content' and then only show the div with the ID of 'sectionName'.
An easy solution for me would be to render two content pages on a HTML page and show and hide content when needed from a onlick handler via javascript in your CSS add a class:
function showDiv() {
document.getElementById("theObject").className = "visible";
}
CSS:
// Switch between the content adding the classes and removing the old class
.visible{
display:none;
}
.show{
display:block;
}
Another solution using sessions "php" via javascript to hold the variables with in statements.
<?php if (session_status() == PHP_SESSION_NONE) {
session_start();
$_SESSION['user_is where_variable'] = "im on page div 1";
}
This could also be done through js anyways.
javascript have a conditional statement using your $_SESSION vars;
if (variable == "im on page div 1" ){
// your functions
}else if ( variable == "im on page div 1"){
// another function
}
Create your click handler to update the variables in the session.

I have three "a" class's that change color when selected, but I need one to be default on load of page

I'm working on this project and I need to add this functionality where we have three products listed.
they started out as div's but changed them to ahref class's to link the entire area.
The box has to change color when hovered - which I have done.
The box needs to change to another color when clicked on - which I have also done.
The one thing I can't figure out is how to make the 2nd box default as selected but then have the color turn off when another one is selected
This is the javascript I have for the page.
var highlightLink = function () {
var active = null, colour = '#f6efa2';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = colour;
active = element;
}
};
}();
here is one of the boxs
<a class="productBox1" href="#" border="0" onclick="highlightLink(this);">
I'm thinking I need an onload function in the body tag but I don't know what code is needed and I also need it to become unselected when another box is selected.
Any help would be greatly appreciated.
If every link has it's own class anyway, use it as ID instead:
<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">
Use classes for common properties. For identifying single elements, use IDs.
Then you can add this to the bottom of your page (above the closing <body> tag):
<script type="text/javascript">
highlightLink(document.getElementById('productBox1'));
</script>
or set
window.onload = function() {
highlightLink(document.getElementById('productBox1'));
}
in the <head>.
Sounds like you're making this more complicated than it really is. Try this (I'm assuming all your a tags have class productBox1):
$('.productBox1').click(function() {
$('.highlighted').removeClass('highlighted');
$(this).addClass('highlighted');
});
Then have a css class called highlighted which has background-color: #f6efa2.
You need jQuery in order to make this work properly.

show and hide divs with radio buttons inside the hidden div

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.

Categories

Resources