PDA

View Full Version : Div swap affecting child scripts



Mirth
02-05-2012, 03:45 PM
Hello,

(Thank you for this wonderful board)

I'm pretty new to Javascript, so I've been trying to work with what I can find. I feel like there's a very simple solution to this, I just don't see it.

I've been using this script to swap a container div: http://www.dynamicdrive.com/forums/showthread.php?t=34902

It works great! However, within each seperate div I have a menu that runs a script which allows the user to scroll through the menu by just hovering their mouse. It's called by: makeScrollable("div.menuWrapper", "div.Menu");

If I use the same class for each menu it works fine, however if I try to style a menu on one div to make it unique from the other and call both:
makeScrollable("div.menuWrapper", "div.Menu");
makeScrollable("div.menuWrapper2", "div.Menu2");

javascript will only run the makeScrollable function in the container div that was opened first in the swap. So if you swap to the other div the menu doesn't move.

Basically I need to be able to call the MakeScrollable function whenever one of the divs are swapped, but I have no idea where to place it or how exactly to modify the script.

EDIT: Correction: Actually it looks like the swap script is causing the child scripts to not function outside of Dreamweaver completely.

jscheuer1
02-05-2012, 04:42 PM
Many scripts will not initialize properly when the content they are trying to initialize is display: none; as is the case with the SEO Detail click Demo script you linked to. It hides the unseen details by making their display none.

However, you first must make sure that your multiple menus would work if the SEO Detail click Demo script were not used at all. If that works, you can try this updated version of the SEO Detail click Demo script that uses position and visibility to hide the unseen content:


<!DOCTYPE html>
<html>
<head>
<title>SEO Detail click Demo w/positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
background-color:white;
}
#triggers {
float:left;
border:1px solid #ccc;
}
#triggers div {
cursor:pointer;
}
#zero {
visibility:hidden;position:absolute;top:-30000px;left:-30000px;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;visibility:hidden;position:absolute;top:-30000px;left:-30000px;}#zero {visibility:visible;position:static;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i){
d[i].style.visibility = 'hidden';
d[i].style.position = 'absolute';
}
document.getElementById(det).style.visibility = 'visible';
document.getElementById(det).style.position = 'static';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="triggers">
<div onclick="reveal('first');">
1st Trigger
</div>
<div onclick="reveal('second');">
2nd Trigger
</div>
<div onclick="reveal('third');">
3rd Trigger
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content.
</div>
</body>
</html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

Mirth
02-06-2012, 04:52 AM
This worked beautifully! Thank you.

Whinestein
02-25-2012, 09:51 AM
Beautiful, John! I've been looking all over and your div swap with the line:
document.write('<style type="text/css">.detail {visibility:hidden;position:absolute;top:-30000px;left:-30000px;}#zero {visibility:visible;position:static;}#zero {display:table-cell; align:"top";}

works perfectly in complex div table situations. Works with all common browsers, too!
I did have to add vertical-align:top; to each div style in order to make them behave and stay put while having many table-cells. I think the important one was in the div that is set as display:table-row; in which the cells reside be given the vertical-align:top; property.

What I'm using your swaps for is the nav bar. Mouseover any of the nav items and it swaps one of the main images for another representing that topic. I'm still finishing it but it's at sesameandlilies.com/test (http://sesameandlilies.com/test/).
It's also very fast, quick to display and I'm going to be using it a lot as I get rid of all the tables and continue with just divs and everything scalable.

This is a long winded thanks. Thanks!

Whinestein
02-25-2012, 05:41 PM
New problem. I don't know if it's this system of div's or what but I want the div swap to change a window that overlaps the main content. I tried different z-index and positioning relative but no go. The swapped div goes to the top or to the bottom of the other div in the main content div. Yeah, so it's a sort of pop up nav thingy.

I think the problem is:

d[i].style.visibility = 'hidden';
d[i].style.position = 'absolute';
}
document.getElementById(det).style.visibility = 'visible';
document.getElementById(det).style.position = 'static';

but I don't understand these lines enough to make them work as I want. I changed the 2nd and 4th line to "relative" but then the swapped div cleared to the absolute bottom of the page.

I want to overlap the invisible empty "zero" div and then swap it with the nav item divs on mouseover. Any help?

jscheuer1
02-26-2012, 02:38 AM
Well, this sounds a little different than what I see on your sesameandlilies.com/test/ page. But not necessarily all that much.

I'm not sure exactly what you're asking though. You could control where the swapped divisions will be when they do show up by setting their css in a stylesheet and strategically locating their markup either within a container that will hold them where or near where you need them to be, or as direct children of the body element. That would include most likely making their position: absolute and supplying left and top css properties, as well as sufficient z-index if need be to cover anything you may want them to cover.

But you're right in a sense, the script won't allow that to work because it sets their position to static. We can change that easily enough. Change the line:


document.getElementById(det).style.position = 'static';

to:


document.getElementById(det).style.position = '';

Or, if you have chosen to set their position as absolute in the stylesheet, you can simply remove that line and its 'companion' line:


d[i].style.position = 'absolute';

That still leaves the matter of positioning them via the stylesheet and their spot in the HTML markup. Are you up to that part? Or were you also asking how to do that?

There's another possible way to go about it, positioning them dynamically in some fashion with reference to their trigger or the mouse event that triggers them. But at that rate we would more or less be writing a menu and there probably already are several menus around that could be more easily adapted than this rather rudimentary code. (I can say that because I wrote it.) ;)

One other thought here, perhaps an advanced tooltip might be good for this 'as is' or slightly adapted. See:

http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

which has some potential issues, but I've worked those out here:

http://www.dynamicdrive.com/forums/blog.php?b=48

Whinestein
02-26-2012, 07:35 PM
Wow, how lucky to find you! Testing all this and will get back to you.

Whinestein
03-02-2012, 11:24 AM
Tooltips work great.
Thanks for your time. I built a page based on the tooltips and it is very good (your tutorials are excellent).
But, I will be using that on another site I'm working on.
The current site (sesameandlilies.com (http://sesameandlilies.com)) I went ahead and used the div swap, your div swap, because it's more solid feeling than the tooltip.

What I've been trying to do is get the best of both worlds: using the z-index on the div swap so that the "zero" div will lay underneath more complex pages (or ones with a lot of text and no convenient image or div area to swap) and then onmouseover have the div swap lay on top of the other content on the page.

Much like the tooltip but in one spot so it's not chasing the cursor around. Yes, I adjusted the offsetX and offsetY on each link trying to keep it appearing toward the vertical middle of the page, but it still is jumpy and feels a bit gimmicky.

If the tooltip could always trigger to one spot that would do it.
If the div swap could change z-index, I think that would do it.

Of course the tooltip offers the "hideDelay" and "showDelay" bonus properties.
I tried finding a solution for "set delay onMouseOver" with your div swap but internet land is jumbled with hoverintent, jquery, and various custom scripts that don't lend themselves to my understanding or customizing. And nobody said, "hey, that worked!"

Once again, thanks for your time, and you are the best explainer I've ever found. I live on the Oregon Coast and there are no local resources for this stuff.

Oh, example of where I want such a creature is on the furniture page, sesameandlilies.com/furniture (http://sesameandlilies.com/furniture/index.htm), where the page is filled with little divs. (I've been nixing all my tables in favor or divs.)

I used spry tooltips here on events page (sesameandlilies.com/events.htm (http://sesameandlilies.com/events.htm)).

Whinestein
03-02-2012, 12:52 PM
In the tooltip.css position is set to absolute. Can it be assigned a place on the page?

Whinestein
03-15-2012, 10:57 PM
Okay, now I'm gonna try 2 sets of div swap on the same page. Using one for the nav and the other for an image gallery with text and links that doesn't use Flash. Do I repeat all the head coding and use a different name for my "zero"?

Whinestein
02-01-2013, 01:53 PM
It's been working great for me all year till I merged it with Twitter Bootstrap. Functions perfectly except "zero", the one that's supposed to show on page load, doesn't show on page load. http://boac.us/fluid.htm

Whinestein
02-01-2013, 02:51 PM
my bad. found my screw up after a week of looking. it works fine all the way down to phone size. thanks again.