Adding CSS and JavaScript for webtop
|
View:
New views
6 Messages
—
Rating Filter:
Alert me
|
 |
Adding CSS and JavaScript for webtop
by Marco van den Oever
::
Rate this Message:
Hi all, For a plugin i am working on i want to set some show hide div structure in the edit page of one of the plugin custom types. What i the best way to do so, and is there already a JavaScript solution available in webtop js? I have found an example on the net, can get it to work on test page in webroot (outside farcry), but how do i add it so that projects using the plugin (would love to put it all in the plugin) use all the code. Right now i am using the below code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function toggle2(showHideDiv, switchTextDiv) { var ele = document.getElementById(showHideDiv); var text = document.getElementById(switchTextDiv); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "restore"; } else { ele.style.display = "block"; text.innerHTML = "collapse"; } } </script> <style type="text/css"> <!-- #headerDiv, #contentDiv { float: left; width: 510px; } #titleText { float: left; font-size: 1.2em; font-weight: bold; margin: 5px 10px; } #headerDiv { background-color: #0037DB; color: #9EB6FF; } #contentDiv { background-color: #FFE694; } #myContent { margin: 5px 10px; } #headerDiv a { float: right; margin: 10px 10px 5px 5px; } #headerDiv a:hover { color: #FFFFFF; } --> </style> </head> <body> <div id="headerDiv"> <div id="titleText">Random Snippets Hide/Show Div Demo - Click here ==></div><a id="myHeader" href="javascript:toggle2 ('myContent','myHeader');" >collapse</a> </div> <div style="clear:both;"></div> <div id="contentDiv"> <div id="myContent" style="display: block;">This is the content that is dynamically being collapsed.</div> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: Adding CSS and JavaScript for webtop
by AJ Mercer
::
Rate this Message:
In the new admin page (Farcry 5.2.4)
If you do a views source (of frame) and you will see what JS scripts are loaded - make sure to look out for combine.cfm, this loads a few at once I sure showhide.js which has a function toggleDocumentItem() This might do what you are after 2009/11/2 Marco van den Oever <marcovandenoever@...>
-- AJ Mercer Web Log: http://webonix.net --~--~---------~--~----~------------~-------~--~----~ You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: Adding CSS and JavaScript for webtop
by Marco van den Oever
::
Rate this Message:
Thank you sir, that will do :) On Nov 1, 11:57 pm, AJ Mercer <ajmer...@...> wrote: > In the new admin page (Farcry 5.2.4) > If you do a views source (of frame) > and you will see what JS scripts are loaded - make sure to look out for > combine.cfm, this loads a few at once > > I sure showhide.js > which has a function toggleDocumentItem() > This might do what you are after > > 2009/11/2 Marco van den Oever <marcovandenoe...@...> > > > > > > > Hi all, > > > For a plugin i am working on i want to set some show hide div > > structure in the edit page of one of the plugin custom types. > > > What i the best way to do so, and is there already a JavaScript > > solution available in webtop js? > > > I have found an example on the net, can get it to work on test page in > > webroot (outside farcry), but how do i add it so that projects using > > the plugin (would love to put it all in the plugin) use all the code. > > > Right now i am using the below code: > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml"> > > <head> > > <meta http-equiv="Content-Type" content="text/html; > > charset=iso-8859-1" /> > > <title>Untitled Document</title> > > > <script language="javascript"> > > function toggle2(showHideDiv, switchTextDiv) { > > var ele = document.getElementById(showHideDiv); > > var text = document.getElementById(switchTextDiv); > > if(ele.style.display == "block") { > > ele.style.display = "none"; > > text.innerHTML = "restore"; > > } > > else { > > ele.style.display = "block"; > > text.innerHTML = "collapse"; > > } > > } > > </script> > > > <style type="text/css"> > > <!-- > > #headerDiv, #contentDiv { > > float: left; > > width: 510px; > > } > > #titleText { > > float: left; > > font-size: 1.2em; > > font-weight: bold; > > margin: 5px 10px; > > } > > #headerDiv { > > background-color: #0037DB; > > color: #9EB6FF; > > } > > #contentDiv { > > background-color: #FFE694; > > } > > #myContent { > > margin: 5px 10px; > > } > > #headerDiv a { > > float: right; > > margin: 10px 10px 5px 5px; > > } > > #headerDiv a:hover { > > color: #FFFFFF; > > } > > --> > > </style> > > > </head> > > > <body> > > > <div id="headerDiv"> > > <div id="titleText">Random Snippets Hide/Show Div Demo - Click > > here ==></div><a id="myHeader" href="javascript:toggle2 > > ('myContent','myHeader');" >collapse</a> > > </div> > > <div style="clear:both;"></div> > > <div id="contentDiv"> > > <div id="myContent" style="display: block;">This is the content > > that is dynamically being collapsed.</div> > > </div> > > > </body> > > </html> > > -- > AJ Mercer > Web Log:http://webonix.net You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: Adding CSS and JavaScript for webtop
by Marco van den Oever
::
Rate this Message:
So easy.... <A HREF="javascript:void(0)" onclick="toggleDocumentItem ('myContent')"> Show / Hide</A> <div id="myContent" style="display:none; background- color:##000000">Show or hide content.</div> Thanks. On Nov 2, 12:40 am, Marco van den Oever <marcovandenoe...@...> wrote: > Thank you sir, that will do :) > > On Nov 1, 11:57 pm, AJ Mercer <ajmer...@...> wrote: > > > In the new admin page (Farcry 5.2.4) > > If you do a views source (of frame) > > and you will see what JS scripts are loaded - make sure to look out for > > combine.cfm, this loads a few at once > > > I sure showhide.js > > which has a function toggleDocumentItem() > > This might do what you are after > > > 2009/11/2 Marco van den Oever <marcovandenoe...@...> > > > > Hi all, > > > > For a plugin i am working on i want to set some show hide div > > > structure in the edit page of one of the plugin custom types. > > > > What i the best way to do so, and is there already a JavaScript > > > solution available in webtop js? > > > > I have found an example on the net, can get it to work on test page in > > > webroot (outside farcry), but how do i add it so that projects using > > > the plugin (would love to put it all in the plugin) use all the code. > > > > Right now i am using the below code: > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// > > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > > <html xmlns="http://www.w3.org/1999/xhtml"> > > > <head> > > > <meta http-equiv="Content-Type" content="text/html; > > > charset=iso-8859-1" /> > > > <title>Untitled Document</title> > > > > <script language="javascript"> > > > function toggle2(showHideDiv, switchTextDiv) { > > > var ele = document.getElementById(showHideDiv); > > > var text = document.getElementById(switchTextDiv); > > > if(ele.style.display == "block") { > > > ele.style.display = "none"; > > > text.innerHTML = "restore"; > > > } > > > else { > > > ele.style.display = "block"; > > > text.innerHTML = "collapse"; > > > } > > > } > > > </script> > > > > <style type="text/css"> > > > <!-- > > > #headerDiv, #contentDiv { > > > float: left; > > > width: 510px; > > > } > > > #titleText { > > > float: left; > > > font-size: 1.2em; > > > font-weight: bold; > > > margin: 5px 10px; > > > } > > > #headerDiv { > > > background-color: #0037DB; > > > color: #9EB6FF; > > > } > > > #contentDiv { > > > background-color: #FFE694; > > > } > > > #myContent { > > > margin: 5px 10px; > > > } > > > #headerDiv a { > > > float: right; > > > margin: 10px 10px 5px 5px; > > > } > > > #headerDiv a:hover { > > > color: #FFFFFF; > > > } > > > --> > > > </style> > > > > </head> > > > > <body> > > > > <div id="headerDiv"> > > > <div id="titleText">Random Snippets Hide/Show Div Demo - Click > > > here ==></div><a id="myHeader" href="javascript:toggle2 > > > ('myContent','myHeader');" >collapse</a> > > > </div> > > > <div style="clear:both;"></div> > > > <div id="contentDiv"> > > > <div id="myContent" style="display: block;">This is the content > > > that is dynamically being collapsed.</div> > > > </div> > > > > </body> > > > </html> > > > -- > > AJ Mercer > > Web Log:http://webonix.net You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: Adding CSS and JavaScript for webtop
by AJ Mercer
::
Rate this Message:
cool
Now you just need to toggle the words 'Hide' and 'Show' ;-) 2009/11/2 Marco van den Oever <marcovandenoever@...>
-- AJ Mercer Web Log: http://webonix.net --~--~---------~--~----~------------~-------~--~----~ You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
|
|
Re: Adding CSS and JavaScript for webtop
by Marco van den Oever
::
Rate this Message:
You're right about getting it even neater... :) <div id="open" style="display:block"> <A HREF="javascript:void(0)" onclick="toggleDocumentItem ('myContent');toggleDocumentItem('open');toggleDocumentItem ('close')">Open</A> </div> <div id="close" style="display:none"> <A HREF="javascript:void(0)" onclick="toggleDocumentItem ('myContent');toggleDocumentItem('open');toggleDocumentItem ('close')">Close</A> </div> <div id="myContent" style="display:none; background- color:##000000">Show or hide content.</div> On Nov 2, 1:13 am, AJ Mercer <ajmer...@...> wrote: > cool > > Now you just need to toggle the words 'Hide' and 'Show' ;-) > > 2009/11/2 Marco van den Oever <marcovandenoe...@...> > > > > > > > So easy.... > > > <A HREF="javascript:void(0)" onclick="toggleDocumentItem > > ('myContent')"> > > Show / Hide</A> > > > <div id="myContent" style="display:none; background- > > color:##000000">Show or hide content.</div> > > > Thanks. > > > On Nov 2, 12:40 am, Marco van den Oever <marcovandenoe...@...> > > wrote: > > > Thank you sir, that will do :) > > > > On Nov 1, 11:57 pm, AJ Mercer <ajmer...@...> wrote: > > > > > In the new admin page (Farcry 5.2.4) > > > > If you do a views source (of frame) > > > > and you will see what JS scripts are loaded - make sure to look out for > > > > combine.cfm, this loads a few at once > > > > > I sure showhide.js > > > > which has a function toggleDocumentItem() > > > > This might do what you are after > > > > > 2009/11/2 Marco van den Oever <marcovandenoe...@...> > > > > > > Hi all, > > > > > > For a plugin i am working on i want to set some show hide div > > > > > structure in the edit page of one of the plugin custom types. > > > > > > What i the best way to do so, and is there already a JavaScript > > > > > solution available in webtop js? > > > > > > I have found an example on the net, can get it to work on test page > > in > > > > > webroot (outside farcry), but how do i add it so that projects using > > > > > the plugin (would love to put it all in the plugin) use all the code. > > > > > > Right now i am using the below code: > > > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > "http:// > > > > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > > > > <html xmlns="http://www.w3.org/1999/xhtml"> > > > > > <head> > > > > > <meta http-equiv="Content-Type" content="text/html; > > > > > charset=iso-8859-1" /> > > > > > <title>Untitled Document</title> > > > > > > <script language="javascript"> > > > > > function toggle2(showHideDiv, switchTextDiv) { > > > > > var ele = document.getElementById(showHideDiv); > > > > > var text = document.getElementById(switchTextDiv); > > > > > if(ele.style.display == "block") { > > > > > ele.style.display = "none"; > > > > > text.innerHTML = "restore"; > > > > > } > > > > > else { > > > > > ele.style.display = "block"; > > > > > text.innerHTML = "collapse"; > > > > > } > > > > > } > > > > > </script> > > > > > > <style type="text/css"> > > > > > <!-- > > > > > #headerDiv, #contentDiv { > > > > > float: left; > > > > > width: 510px; > > > > > } > > > > > #titleText { > > > > > float: left; > > > > > font-size: 1.2em; > > > > > font-weight: bold; > > > > > margin: 5px 10px; > > > > > } > > > > > #headerDiv { > > > > > background-color: #0037DB; > > > > > color: #9EB6FF; > > > > > } > > > > > #contentDiv { > > > > > background-color: #FFE694; > > > > > } > > > > > #myContent { > > > > > margin: 5px 10px; > > > > > } > > > > > #headerDiv a { > > > > > float: right; > > > > > margin: 10px 10px 5px 5px; > > > > > } > > > > > #headerDiv a:hover { > > > > > color: #FFFFFF; > > > > > } > > > > > --> > > > > > </style> > > > > > > </head> > > > > > > <body> > > > > > > <div id="headerDiv"> > > > > > <div id="titleText">Random Snippets Hide/Show Div Demo - Click > > > > > here ==></div><a id="myHeader" href="javascript:toggle2 > > > > > ('myContent','myHeader');" >collapse</a> > > > > > </div> > > > > > <div style="clear:both;"></div> > > > > > <div id="contentDiv"> > > > > > <div id="myContent" style="display: block;">This is the content > > > > > that is dynamically being collapsed.</div> > > > > > </div> > > > > > > </body> > > > > > </html> > > > > > -- > > > > AJ Mercer > > > > Web Log:http://webonix.net > > -- > AJ Mercer > Web Log:http://webonix.net You received this message cos you are subscribed to "farcry-dev" Google group. To post, email: farcry-dev@... To unsubscribe, email: farcry-dev+unsubscribe@... For more options: http://groups.google.com/group/farcry-dev -------------------------------- Follow us on Twitter: http://twitter.com/farcry -~----------~----~----~----~------~----~------~--~--- |
| Free embeddable forum powered by Nabble | Forum Help |
