...

View Full Version : Link preview show/hide div,iframe



n381
09-01-2011, 02:12 PM
Hello codingforums,

There are various widgets and plugins that show link preview via tooltip or iframe,
So as I am trying to continuously improve web sites experience with new trends and web

functionalities - thus it come the task for uniform link preview via div and iframe.
This is the script that use attribute id's but for the complete solution it would be required to

display link within event 'this' or something -any suggestions and help are very appreciated.

Thanks


<script type="text/javascript">
function toggleDiv(divid){
var div = document.getElementById(divid);
div.style.display = div.style.display == 'block' ? 'none' : 'block';
}
</script>

<div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle
Panel 1</a></div>
<div id="panel1" class="panel">
<h2>Panel 1</h2>
This panel contains text
</div>
<div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle
Panel 2</a></div>
<div id="panel2" class="panel" style="display:block;">
<h2>Panel 2</h2>
This panel contains external url content
<iframe src="http://" width="100%" heigth="500"></iframe>
</div>

<div id="panel1" class="panel">
<h2>Panel 1</h2>
This panel starts closed because style='display:none' is defined in
the style section of the head
</div>
<div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle
Panel 2</a></div>
<div id="panel2" class="panel" style="display:block;">
<h2>Panel 1</h2>
This panel starts open because of style='display:block'
</div>
<a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel

1</a>
[/CODE]

Old Pedant
09-01-2011, 07:30 PM
??? Is this what you mean???



<html>
<head>
<script type="text/javascript">
function toggleDiv(toggler)
{
var node = toggler.parentNode;
while ( node.tagName.toLowerCase() != "div" )
{
node = node.parentNode;
if ( node == null ) return; // ??? error!!!
}
var divs = node.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
var div = divs[d];
if ( div.className == "panel" )
{
div.style.display = div.style.display == 'block' ? 'none' : 'block';
return;
}
}
}
function addToggles( )
{
var divs = document.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
if ( divs[d].className == "toggle" )
{
divs[d].onclick = function() { toggleDiv(this); };
}
}
}
window.onload = addToggles;
</script>
<style type="text/css">
div.toggle {
position: relative;
width: 150px; height: 25px;
border: solid red 1px;
background-color: pink;
}
div.panel {
display: none;
position: relative;
width: 700px; height: 200px;
border: solid blue 2px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div class="toggle">Toggle Panel 1</div>
<div class="panel">
<h2>Panel 1</h2>
This panel contains text
</div>
</div>
<div>
<div class="toggle">Toggle Panel 2</div>
<div class="panel">
<h2>Panel 2</h2>
More text...
</div>
</div>
<div>
<div class="toggle">Toggle Panel 3</div>
<div class="panel">
<h2>Panel 3</h2>
And still more...
</div>
</div>
</body>
</html>

n381
09-07-2011, 04:05 AM
Hello again, and thank you for messaging here,
I've tried your script but, due the specific script I am adopting only the following snippet works and add iframe functionality to each file list iframe
[CODE]
<script type="text/javascript">
function HideFrame(){
fr = document.getElementById ("frDocViewer");
if (fr.style.display!='none'){
fr.style.display="none";
}
else {
fr.style.display="block";
}
}
</script>

<h5>Preview</h5>
<div>
<input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
<iframe id="frDocViewer" name="frDocViewer" src="',r.unescapedUrl,'" frameborder="1" ></iframe>

[\CODE]


Please have look at the above script it needs modification as it is functional it only handle the first iframe -

n381
09-07-2011, 01:04 PM
I would also need to modify script to load iframes on event contrary to deafult page load ?

Old Pedant
09-08-2011, 03:21 AM
I'm sorry, that makes no sense.

This isn't legal HTML:


<iframe id="frDocViewer" name="frDocViewer" src="',r.unescapedUrl,'" frameborder="1" ></iframe>

Or I guess it is legal HTML, but the URL you give for the src is completely invalid:

',r.unescapedUrl,'

You can't have apostrophes in a URL.

n381
09-08-2011, 03:38 AM
Thank you for responding,

The Url is script variable and it is not of the importance for this script in my opinion as the script just need to be looped through element increment but I am not able to write that actually

<script type="text/javascript">
function HideFrame(){
fr = document.getElementById ("frDocViewer");
if (fr.style.display!='none'){
fr.style.display="none";
}
else {
fr.style.display="block";
}
}
</script>

<h5>Preview</h5>
<div>
<input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
<iframe id="frDocViewer" name="frDocViewer" src="http://" frameborder="1" ></iframe>

Hope you understood me this snippet should be able to open&close multiple iframe instances as it is the only method that parse within other script I am using for translating.

Best Regards

Old Pedant
09-08-2011, 05:34 AM
No, I'm still lost.

How about showing us a *LIVE* page? Give us a URL to look at? If you can't do that, maybe show us a complete page of HTML?

n381
09-08-2011, 09:52 AM
Hello again,

I've to keep that src Url with "' double and single quotes because some of the jquery strips them if I am right with this.
And here is the url of testing script link (http://www.ovo-ono.co.cc/query)

This script would be optimal to load with frames closed or not loaded for flawless work and processing.
Please help to improve this script and make alternative possibilities with this newly added features.

Old Pedant
09-08-2011, 08:38 PM
Okay, *NOW* I understand WHAT you are doing.

What do you want to CHANGE?

Do you want all the <iframe>s to be hidden until the user clicks a PREVIEW button?

Do you want ONLY ONE <iframe> to show at a time? Or can any number show?

n381
09-08-2011, 09:23 PM
Thank you for responding,
I need to arrange iframe preview starting closed and that opens upon click event but with various scripts I've tested this one only parse and I need it to handle every iframe separately

<script type="text/javascript">
function HideFrame(){
fr = document.getElementById ("frDocViewer");
if (fr.style.display!='none'){
fr.style.display="none";
}
else {
fr.style.display="block";
}
}
</script>

<h5>Preview</h5>
<div>
<input type="button" value="Hide/Show" onclick="HideFrame(frDocViewer);" />
<iframe id="frDocViewer" name="frDocViewer" src="http://" frameborder="1" ></iframe>

Old Pedant
09-08-2011, 10:27 PM
Please don't show me code. The code is wrong, so why show it?

Please just ANSWER MY QUESTIONS.

One more time:

(1) Do you want all the <iframe>s to be hidden (start out invisible) until the user clicks a PREVIEW button?
Yes or no? [If you say no, I assume you want them to ALL SHOW when the page first opens.]

(2) Do you want ONLY ONE <iframe> to show at a time?
Yes or no? [If you say yes, then I will hide all the others and only show the one the user clicks on.]

n381
09-08-2011, 10:49 PM
Thank you responding,
Yes I want all frames hidden at start and after upon click event it should be preview of each one

Regards,

PS. I have posted that snippet several times as I found that it only works due jquery stripping of quotas -anyway if you are able to make this other way then please provide some instructions about it. Thank you

Old Pedant
09-08-2011, 10:56 PM
Ahhhh....

I am *SO SORRY* to mislead you!

You are looking for an answer to a JQUERY problem. I thought you wanted a JAVASCRIPT answer. That is, one using basic JavaScript, not the jQuery library.

I don't use jQuery. You probablly need to ask this in the jQuery forum. Yes, it is a separate forum here.

I could do all this in JavaScript, pretty easily, but I don't know jQuery will enough to do it.

n381
09-08-2011, 11:04 PM
Okay,
I would appreciate any solution I've just mentioned that jquery is tend to avoid or strip quotations and it is okay and welocme any javascript solution that can work with the script at this demo link (http://www.ovo-ono.co.cc/query/)

Thank you

webninja
09-09-2011, 11:36 AM
Thanks for this thread but im a bit lost. Can anyone post a sample demo of this script. can't get it to work



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum