The last month of the year. How fast 2011 went huh? Well don't worry, I will be doing Code Requests all year, next year. Talking about code requests, this is one right now. In fact, this is the last one for the year. So what are you waiting for? Request for a code! Every month, I do a Code Request Post on this forum. And every month, I will get better at coding. At the moment I don't do Server-side Coding. But I can do many things with JavaScript.
- 486 Posts
- 26 Reply Likes
- excited
Posted 7 years ago
- 4 Posts
- 0 Reply Likes
A monthly code request? Awesome!
Hello,
I am moving my site onefatherslove.com to Yola. Can you create a Jump to: code? Here is a link to an example page: http://onefatherslove.com/free_hot_me...
And, here is the code (if allowed) I am using, it is a hack and there is no style sheet module on Yola.
Hello,
I am moving my site onefatherslove.com to Yola. Can you create a Jump to: code? Here is a link to an example page: http://onefatherslove.com/free_hot_me...
And, here is the code (if allowed) I am using, it is a hack and there is no style sheet module on Yola.
- 4 Posts
- 0 Reply Likes
Hello and thank you for your reply. I did past the code above, but it would not show.
Anyway, the jump link is a #downtown
Anyway, the jump link is a #downtown
I do not want a new page or pop up, and cookies are not necessary. Just a jump to a certain part of the same page.
Thank you.
- 4 Posts
- 0 Reply Likes
The comment box will not allow me to post the code.
- 486 Posts
- 26 Reply Likes
Do you know any Javascript? jQuery?
You can use the following code that I wrote:
Right now this does nothing because I wrote it as a little jQuery Plugin.
Which will be easy to use.
1. Add an Id to the link you want to make jump.
2. Add this code:
KEEP THE # IN THERE!
In the spot where it says ID HERE add the id you added to the link.
See a demo: http://jsfiddle.net/6T8a4/
Also the 2500 is just the speed it slides to the jump links location.
Please note a jump link should look like this:
I know this might be confusing you, but if you have questions please ask.
You can use the following code that I wrote:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type="text/javascript">
$.fn.scroll = function(time) {
$(this).click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('html,body').animate({
scrollTop: $(id).offset().top
}, time);
});
};
</script>
Right now this does nothing because I wrote it as a little jQuery Plugin.
Which will be easy to use.
1. Add an Id to the link you want to make jump.
2. Add this code:
<script type="text/javascript">
$(document).ready(function(){
$('#ID HERE').scroll(2500);
});
</script>
KEEP THE # IN THERE!
In the spot where it says ID HERE add the id you added to the link.
See a demo: http://jsfiddle.net/6T8a4/
Also the 2500 is just the speed it slides to the jump links location.
Please note a jump link should look like this:
<a id="ID HERE" href="#ID TO JUMP TO">Hello</a>
I know this might be confusing you, but if you have questions please ask.
- 4 Posts
- 0 Reply Likes
Okay, you are good!
Here is what I did...
On top of the page insert a HTML module and I pasted:
Jump to:
Downtown Sacramento
North Sacramento
South Sacramento
Insert a new HTML module at each jump location within the content:
Downtown
Content...............
North
Content............
South
Content...............
Of course the ID would change, but it works. The only drawback for me is that I have to break my tables at each location I want a jump link too.All of my content is in tables. It works and works great. Easy enough to just repeat the steps over and over.
Thank you for your late night effort to do this!
Here is what I did...
On top of the page insert a HTML module and I pasted:
Jump to:
Downtown Sacramento
North Sacramento
South Sacramento
Insert a new HTML module at each jump location within the content:
Downtown
Content...............
North
Content............
South
Content...............
Of course the ID would change, but it works. The only drawback for me is that I have to break my tables at each location I want a jump link too.All of my content is in tables. It works and works great. Easy enough to just repeat the steps over and over.
Thank you for your late night effort to do this!
- 486 Posts
- 26 Reply Likes
Your welcome, anytime you need any help, feel free to email me at: shawn@weebuild.biz
Best Regards,
Shawn
Best Regards,
Shawn
- 7 Posts
- 0 Reply Likes
hi shawn can you create a menu like cnet.i want to put it on my site.
- 486 Posts
- 26 Reply Likes
Super Man,
This would be easy. But i'm sorry to say this would take me too long. And only have time for little projects.
Best Regards,
Shawn
This would be easy. But i'm sorry to say this would take me too long. And only have time for little projects.
Best Regards,
Shawn
- 7 Posts
- 0 Reply Likes
ok can you give me some others menu codes
- 11 Posts
- 0 Reply Likes
hello, my name is luke, i run flashgamesfree.co.uk and was wondering if you know what code to use to make a button that when clicked will make a swf game go full screen, i have the games up and i have used the html widget to insert them. thank you very much.
- 486 Posts
- 26 Reply Likes
I will need to see the HTML of the SWF
- 11 Posts
- 0 Reply Likes
thank you and much abliged
- 11 Posts
- 0 Reply Likes
- 11 Posts
- 0 Reply Likes
<!--
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/sh..." width="640" height="480">
<param name="movie" value="resources/Territory war 2.swf" />
<param name="quality" value="high" />
<embed src="resources/Territory war 2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflash..." type="application/x-shockwave-flash" width="640" height="480"></embed>
</object>
-->
did it werk?
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/sh..." width="640" height="480">
<param name="movie" value="resources/Territory war 2.swf" />
<param name="quality" value="high" />
<embed src="resources/Territory war 2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflash..." type="application/x-shockwave-flash" width="640" height="480"></embed>
</object>
-->
did it werk?
- 486 Posts
- 26 Reply Likes
Please note next time put you code in Code Tags
- 10 Posts
- 0 Reply Likes
Hi shawn, we have been looking for slashdot CSS menu code with style sheet for our multiple page website.
Could you pls help us with source code for slashdot css menu, so we just customise, copy and paste.
See our sample website www.assetservicecommodities.com with table menu from html101.yolasite.
Could you pls help us with source code for slashdot css menu, so we just customise, copy and paste.
See our sample website www.assetservicecommodities.com with table menu from html101.yolasite.
- 11 Posts
- 0 Reply Likes
hi just wondering about the full screen button i asked about, if you want to contact me directly me email is, fgfhelp@googlemail.com. thank you
- 486 Posts
- 26 Reply Likes
fgfhelp,
Is this something you want:
http://jsfiddle.net/AzUgd/13/show/
Or would you like it in a popup?
Is this something you want:
http://jsfiddle.net/AzUgd/13/show/
Or would you like it in a popup?
- 486 Posts
- 26 Reply Likes
Actually, http://jsfiddle.net/AzUgd/18/show/. Is the best its going to get.
- 486 Posts
- 26 Reply Likes
Update! Iv'e been working a while on this: http://jsfiddle.net/GjENL/show
I can't make it much better sorry.
But do you like it? I can give you the code?
Best Regards,
Shawn
I can't make it much better sorry.
But do you like it? I can give you the code?
Best Regards,
Shawn
- 18 Posts
- 2 Reply Likes
Hi Shaun that code would be useful for me too, it looks good as well, can the make full screen button be placed anywhere around the game (eg under it)
- 18 Posts
- 2 Reply Likes
Hi Shaun the game full screen code would be useful for me too, it looks good as well, can the make full screen button be placed anywhere around the game (eg under it)
- 10 Posts
- 0 Reply Likes
Looking for slashdot CSS menu code with style sheet for multiple page website.
Can anybody help send the source code for slashdot css menu, so we just customize, copy and paste.
See sample website www.assetservicecommodities.com with table menu from html101.yolasite.com.
Can anybody help send the source code for slashdot css menu, so we just customize, copy and paste.
See sample website www.assetservicecommodities.com with table menu from html101.yolasite.com.
- 486 Posts
- 26 Reply Likes
Jefferson,
As I already said, I cant seem to find a good one.
As I already said, I cant seem to find a good one.
- 7473 Posts
- 2115 Reply Likes
Maybe this one would be what you are after?
http://www.dynamicdrive.com/dynamicin...
http://www.dynamicdrive.com/dynamicin...
- 10 Posts
- 0 Reply Likes
Yes your right, its what I am after. dynamicdrive slashdot flash menu is exactly what I want. Could you pls send me the source Code (css & html) so I just customize, copy and paste to html of my web pages
- 7473 Posts
- 2115 Reply Likes
Hi Jefferson. The code is all there on that link. There is a zip file to download and the instructions are in the places indicated on the link. If you need a hand please let us know.
- 10 Posts
- 0 Reply Likes
Yes pls I need your help. I am virtually new and not an expert on css menu. Could you pls see our website (www.assetservicecommodities.com) vertical side menu and send me SAMPLE slashdot code to follow or customize. Also inform on how to install and paste in web pages.
- 7473 Posts
- 2115 Reply Likes
OK Jefferson. I will do this as your site menu is well defined and I can follow it clearly.
Can you tell me before I start if you have a Silver subscription? It changes the way the files may be organised and is preferable but not essential.
Are you situated in Bangken?
I will wait for your reply.
Gop.
Can you tell me before I start if you have a Silver subscription? It changes the way the files may be organised and is preferable but not essential.
Are you situated in Bangken?
I will wait for your reply.
Gop.
- 10 Posts
- 0 Reply Likes
Hi Gop, guess I dont have a Silver subscription even though I have 4 paid domains with yola. OK, just help out with the slashlot menu source code without the Silver subscription hence its not essential.
- 486 Posts
- 26 Reply Likes
Jefferson, im currently trying to create an easy to use menu using JQuery. I will keep working till I get it to work.
- 7473 Posts
- 2115 Reply Likes
Jefferson,
I will hold off if you like until Shawn has his working?
Gop
I will hold off if you like until Shawn has his working?
Gop
- 486 Posts
- 26 Reply Likes
Gop, you can still help and will see which who he likes better. So he has some options.
- 486 Posts
- 26 Reply Likes
I have been working now for about 30 minutes and this is what I have right now:
http://jsfiddle.net/HEC7z/8/
Any suggestions, I will do whatever you wan't, as long as I can do it, which, I think I can ;)
Best Regards,
Shawn.
http://jsfiddle.net/HEC7z/8/
Any suggestions, I will do whatever you wan't, as long as I can do it, which, I think I can ;)
Best Regards,
Shawn.
- 7473 Posts
- 2115 Reply Likes
Nice menu. he already has seen the DD slash dot so now it's upto him.
Gop.
Gop.
- 486 Posts
- 26 Reply Likes
Gop, that Slashdot menu on DD is a little hard to use though. By mine, its setup so when you add a new ul tag, it makes the new section. I can add those arrows too, but I don't think there needed.
- 486 Posts
- 26 Reply Likes
- 486 Posts
- 26 Reply Likes
Jefferson, I will be posting how to use my code in a while.
- 531 Posts
- 12 Reply Likes
I want a code for a simple pop-up.. which should inform the visitors that the site is still under construction and new stuff is constantly being added.
Just a box, with some text and a button or a cross sign to dismiss the box.
I want the box to appear on homepage and as soon as the visitor lands there.
I would be really thankful, if you can help me with a code.
Thanks
Just a box, with some text and a button or a cross sign to dismiss the box.
I want the box to appear on homepage and as soon as the visitor lands there.
I would be really thankful, if you can help me with a code.
Thanks
- 486 Posts
- 26 Reply Likes
- 48 Posts
- 3 Reply Likes
Hi, making a website on Yola and have seen your great at coding, how would you create a pop out/up for my homepage to show users whats news to the site, that they can close then continue browsing
- 486 Posts
- 26 Reply Likes
- 18 Posts
- 2 Reply Likes
Your mate Nathan replied on twitter, thanks :)
- 486 Posts
- 26 Reply Likes
Ok, that's good :)
Best Regards,
Shawn. Glad I could help ;)
Best Regards,
Shawn. Glad I could help ;)
- 35 Posts
- 0 Reply Likes
Here's a code request -
In the other three image vars, there will be other google adsense codes. However, this code doesn't work at all. Perhaps you can do this in your code of the month.
<script language="JavaScript">
images = new Array(4);
images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';
images[1] = 'other code';
images[2] = 'other code';
images[3] = 'other code';
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
</script>
In the other three image vars, there will be other google adsense codes. However, this code doesn't work at all. Perhaps you can do this in your code of the month.
- 486 Posts
- 26 Reply Likes
Script tags don't work in JS. If you replace:
With:
images[0] = 'Hi';
It would work but not with script tags. Sorry, I see if I can find a way to make this work like you want it.
images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';
With:
images[0] = 'Hi';
It would work but not with script tags. Sorry, I see if I can find a way to make this work like you want it.
- 486 Posts
- 26 Reply Likes
To Jefferson.
Jefferson,
You wanted a slashDot menu. Thats what your getting.
First you need to go to the page you want the slashDot menu to be displayed and open an HTML widget.
Put this in:
This is just a couple of files and CSS. This will not make the slashdot menu show/work.
Now you must add the Javascript. You do this by adding this code under the one above:
I added some comment tags (//) so you can see how the code works.
But its not done and still work work. This is because I created an jQuery function. These functions have to be executed.
You can do this by adding the follow:
But this might look confusing to you.
So try to just look at:
The reason we have the '#slashdot' is because that's the element around the li's and ul's.
I did this so you can't just do this:
<!--
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3<<li>
</ul>
-->
Because I didn't know if you have any other UL or LI tags on the page that you don't want to be affected by the slashdot code.
This would be what you would have to do:
<!--
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</div>
-->
And just continue adding the UL to get more sections. The LI are the sub-sections that open when you click the UL.
Now with
This is just adding more options like this:
What is what?
Arrow - This is the element the arrow is in. This is currently set to i. As you can see here:
Holder - This is what creates the new tab this you click on to open the Inside.
Inside - This is the element that opens when you click the holder.
Example:
If you make your code like this:
NOTE: TO CHANGE HOLDER, OR INSIDE YOU MUST ADJUST THE CSS TOO.
Then you would need to make your HTML this:
<!--
<div id="sd">
<span>
<b>►</b> 1
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</span>
</div>
-->
I do recommend to keep the current settings because it will look the best with UL, i, and LI
If you don't use the advance settings then your HTML would look something like this:
<!--
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<ul>
<i>►</i> 2
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<i>►</i> 3
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
<ul>
<i>►</i> 4
<li>4.1</li>
<li>4.2</li>
<li>4.1</li>
<li>4.2</li>
</ul>
</div>
-->
You can always add more UL and LI tags.
The HTML can be places under the Javascript.
Full Setup:
<!--
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type='text/css'>
li{
display:none;
background:#B3B3B3;
color:black;
width:80px;
padding:9px;
}
span:hover{
background:#D6D6D6;
}
.active{
background:#858585;
}
ul{
background:#5C5C5C;
color:white;
width:60px;
padding:9px;
}
ul:hover{
background:#737272;
}
.first{
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.last{
border-bottom-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
}
</style>
<script type='text/javascript'>
//Creates the slashDot function
$.slashDot = function(ar, options){
//The variable for the options
var fn = {
arrow: 'i',
holder: 'ul',
inside: 'li'
}
//The variables for the effect and the speed
var effect;
var time;
//The variable to get the options to work.
var o = $.extend(fn, options);
//Getting the border-radius to apply to the first and last, ul
$(ar+' '+o.holder+':first').addClass('first');
$(ar+' '+o.holder+':last').addClass('last');
//The function that makes the UL do a function onclick
$(ar+' '+o.holder+':not("'+o.inside+'")').click(function() {
//variable for the if following it.
var i = $(this).children('li');
//If to check when the li element is display:none;
if ($(i).css('display') === 'none') {
//If display:none;
effect = 'easeOutElastic';
time = 850;
$(this).children(''+o.arrow+'').text('▼')
} else {
//if display is not none
effect = 'easeInElastic';
time = 300;
$(this).children(''+o.arrow+'').text('►');
}
//Getting the li element to slideDown and Up
$(this).children(''+o.inside+'').slideToggle(time, effect);
//Toggling the Class active on the UL click
$(this).toggleClass('active');
//Adding border-radius to the last and first LI of each UL
$(this).children(''+o.inside+':first').addClass('first');
$(this).children(''+o.inside+':last').addClass('last');
});
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$.slashDot('#slashdot');
});
</script>
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<ul>
<i>►</i> 2
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<i>►</i> 3
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
<ul>
<i>►</i> 4
<li>4.1</li>
<li>4.2</li>
<li>4.1</li>
<li>4.2</li>
</ul>
</div>
-->
I hope you can set it up. This will be hard for you if you have no experience with Javascript. Please tell me if you need help.
I tested the full setup code so if you can get the Javascript to work use the full setup code and just edit the HTML.
Click Here for a Demo with the code all in one box.
Click Here for a Demo with each type of coding in a box.
In the demo I didn't add:
Because that's built into that site. But you will need it. If you have Yola silver I suggest adding that into the Yola Tracking Code part.
Best Regards,
Shawn
Jefferson,
You wanted a slashDot menu. Thats what your getting.
First you need to go to the page you want the slashDot menu to be displayed and open an HTML widget.
Put this in:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type='text/css'>
li{
display:none;
background:#B3B3B3;
color:black;
width:80px;
padding:9px;
}
span:hover{
background:#D6D6D6;
}
.active{
background:#858585;
}
ul{
background:#5C5C5C;
color:white;
width:60px;
padding:9px;
}
ul:hover{
background:#737272;
}
.first{
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.last{
border-bottom-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
}
</style>
This is just a couple of files and CSS. This will not make the slashdot menu show/work.
Now you must add the Javascript. You do this by adding this code under the one above:
<script type='text/javascript'>
//Creates the slashDot function
$.slashDot = function(ar, options){
//The variable for the options
var fn = {
arrow: 'i',
holder: 'ul',
inside: 'li'
}
//The variables for the effect and the speed
var effect;
var time;
//The variable to get the options to work.
var o = $.extend(fn, options);
//Getting the border-radius to apply to the first and last, ul
$(ar+' '+o.holder+':first').addClass('first');
$(ar+' '+o.holder+':last').addClass('last');
//The function that makes the UL do a function onclick
$(ar+' '+o.holder+':not("'+o.inside+'")').click(function() {
//variable for the if following it.
var i = $(this).children('li');
//If to check when the li element is display:none;
if ($(i).css('display') === 'none') {
//If display:none;
effect = 'easeOutElastic';
time = 850;
$(this).children(''+o.arrow+'').text('▼')
} else {
//if display is not none
effect = 'easeInElastic';
time = 300;
$(this).children(''+o.arrow+'').text('►');
}
//Getting the li element to slideDown and Up
$(this).children(''+o.inside+'').slideToggle(time, effect);
//Toggling the Class active on the UL click
$(this).toggleClass('active');
//Adding border-radius to the last and first LI of each UL
$(this).children(''+o.inside+':first').addClass('first');
$(this).children(''+o.inside+':last').addClass('last');
});
}
</script>
I added some comment tags (//) so you can see how the code works.
But its not done and still work work. This is because I created an jQuery function. These functions have to be executed.
You can do this by adding the follow:
<script type="text/javascript">
$(document).ready(function() {
$.slashDot('#slashdot');
});
</script>
But this might look confusing to you.
So try to just look at:
$.slashDot('#slashdot');
The reason we have the '#slashdot' is because that's the element around the li's and ul's.
I did this so you can't just do this:
<!--
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3<<li>
</ul>
-->
Because I didn't know if you have any other UL or LI tags on the page that you don't want to be affected by the slashdot code.
This would be what you would have to do:
<!--
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</div>
-->
And just continue adding the UL to get more sections. The LI are the sub-sections that open when you click the UL.
Now with
$.slashDot('#slashdot');
you can go even more advanced.
This is just adding more options like this:
$.slashDot('#slashdot', {
arrow: 'i',
holder: 'ul',
inside: 'li'
};
What is what?
Arrow - This is the element the arrow is in. This is currently set to i. As you can see here:
<i>►</i>
If you change arrow: 'i', to: arrow: 'b', then I would do: <b>►</b>
Holder - This is what creates the new tab this you click on to open the Inside.
Inside - This is the element that opens when you click the holder.
Example:
If you make your code like this:
$.slashDot('#sd', {
arrow: 'b',
holder: 'span',
inside: 'div'
};
NOTE: TO CHANGE HOLDER, OR INSIDE YOU MUST ADJUST THE CSS TOO.
Then you would need to make your HTML this:
<!--
<div id="sd">
<span>
<b>►</b> 1
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</span>
</div>
-->
I do recommend to keep the current settings because it will look the best with UL, i, and LI
If you don't use the advance settings then your HTML would look something like this:
<!--
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<ul>
<i>►</i> 2
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<i>►</i> 3
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
<ul>
<i>►</i> 4
<li>4.1</li>
<li>4.2</li>
<li>4.1</li>
<li>4.2</li>
</ul>
</div>
-->
You can always add more UL and LI tags.
The HTML can be places under the Javascript.
Full Setup:
<!--
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type='text/css'>
li{
display:none;
background:#B3B3B3;
color:black;
width:80px;
padding:9px;
}
span:hover{
background:#D6D6D6;
}
.active{
background:#858585;
}
ul{
background:#5C5C5C;
color:white;
width:60px;
padding:9px;
}
ul:hover{
background:#737272;
}
.first{
border-top-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.last{
border-bottom-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
}
</style>
<script type='text/javascript'>
//Creates the slashDot function
$.slashDot = function(ar, options){
//The variable for the options
var fn = {
arrow: 'i',
holder: 'ul',
inside: 'li'
}
//The variables for the effect and the speed
var effect;
var time;
//The variable to get the options to work.
var o = $.extend(fn, options);
//Getting the border-radius to apply to the first and last, ul
$(ar+' '+o.holder+':first').addClass('first');
$(ar+' '+o.holder+':last').addClass('last');
//The function that makes the UL do a function onclick
$(ar+' '+o.holder+':not("'+o.inside+'")').click(function() {
//variable for the if following it.
var i = $(this).children('li');
//If to check when the li element is display:none;
if ($(i).css('display') === 'none') {
//If display:none;
effect = 'easeOutElastic';
time = 850;
$(this).children(''+o.arrow+'').text('▼')
} else {
//if display is not none
effect = 'easeInElastic';
time = 300;
$(this).children(''+o.arrow+'').text('►');
}
//Getting the li element to slideDown and Up
$(this).children(''+o.inside+'').slideToggle(time, effect);
//Toggling the Class active on the UL click
$(this).toggleClass('active');
//Adding border-radius to the last and first LI of each UL
$(this).children(''+o.inside+':first').addClass('first');
$(this).children(''+o.inside+':last').addClass('last');
});
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$.slashDot('#slashdot');
});
</script>
<div id="slashdot">
<ul>
<i>►</i> 1
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<ul>
<i>►</i> 2
<li>2.1</li>
<li>2.2</li>
</ul>
<ul>
<i>►</i> 3
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
<ul>
<i>►</i> 4
<li>4.1</li>
<li>4.2</li>
<li>4.1</li>
<li>4.2</li>
</ul>
</div>
-->
I hope you can set it up. This will be hard for you if you have no experience with Javascript. Please tell me if you need help.
I tested the full setup code so if you can get the Javascript to work use the full setup code and just edit the HTML.
Click Here for a Demo with the code all in one box.
Click Here for a Demo with each type of coding in a box.
In the demo I didn't add:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
Because that's built into that site. But you will need it. If you have Yola silver I suggest adding that into the Yola Tracking Code part.
Best Regards,
Shawn
- 10 Posts
- 0 Reply Likes
Hi shawn,
Thanks for your help. Have tried the css, java and html codes, still not perfect but I am getting there.
Question:
Do I have to paste CSS & Java codes above in all my web pages (70 pages) or just at one page (Home page)?..... html menu code would be pasted in all 70 pages.
Could you pls insert below HTML code (from my yola page) into your given HTML code so I will follow your example to customize & link all the 70 pages in the slashlot.
MINERALS (static, not linked)
Iron sand
Copper ore
METALLURGY (static, not linked)
Copper tube/pipe
Aluminum composite
Thanks,
Jefferson
Thanks for your help. Have tried the css, java and html codes, still not perfect but I am getting there.
Question:
Do I have to paste CSS & Java codes above in all my web pages (70 pages) or just at one page (Home page)?..... html menu code would be pasted in all 70 pages.
Could you pls insert below HTML code (from my yola page) into your given HTML code so I will follow your example to customize & link all the 70 pages in the slashlot.
MINERALS (static, not linked)
Iron sand
Copper ore
METALLURGY (static, not linked)
Copper tube/pipe
Aluminum composite
Thanks,
Jefferson
- 486 Posts
- 26 Reply Likes
Jefferson,
For the Javascript and CSS, I would put them in the Yola Tracking code part in the header section so that code is on every.
But I suggest that you keep this little Javascript code seperate on each page:
You will need to put the Javascript and CSS only on the page that your slashdot menu is on. For linking do this:
So you would have:
So your slash dot menu code would look something like this:
<!--
<ul>
<i>►</i> Minerals
<li><a href="http://www.assetservicecommodities.co... Sand</a></li>
<li><a href="Another URL">Text</a></li>
<li><a href="Another URL">Text</a></li>
</ul>
-->
and so on.
Best Regards,
Shawn
For the Javascript and CSS, I would put them in the Yola Tracking code part in the header section so that code is on every.
But I suggest that you keep this little Javascript code seperate on each page:
<script type="text/javascript">
$(document).ready(function() {
$.slashDot('#slashdot');
});
</script>
You will need to put the Javascript and CSS only on the page that your slashdot menu is on. For linking do this:
<a href="LINK HERE">Text to click on</a>
So you would have:
<a href="http://www.assetservicecommodities.com/iron-sand.php">Iron Sand</a>
So your slash dot menu code would look something like this:
<!--
<ul>
<i>►</i> Minerals
<li><a href="http://www.assetservicecommodities.co... Sand</a></li>
<li><a href="Another URL">Text</a></li>
<li><a href="Another URL">Text</a></li>
</ul>
-->
and so on.
Best Regards,
Shawn
- 10 Posts
- 0 Reply Likes
Hi Shawn,
I have 2 issues as follows:
1. Have pasted the CSS codes first, JAVA codes second at the page head before pasting the LINK codes under. But it displays only the List of test to click on. Tests was NOT linked to yola Site builder, no flash CSS buttons as was in the sample.
See below sample of how I pasted the HTML codes ....
2. I need also a Horizontal Drop Down Codes with CSS buttons
Thanks,
Jefferson
I have 2 issues as follows:
1. Have pasted the CSS codes first, JAVA codes second at the page head before pasting the LINK codes under. But it displays only the List of test to click on. Tests was NOT linked to yola Site builder, no flash CSS buttons as was in the sample.
See below sample of how I pasted the HTML codes ....
- Iron sand
- Copper ore
? Minerals
2. I need also a Horizontal Drop Down Codes with CSS buttons
Thanks,
Jefferson
- 486 Posts
- 26 Reply Likes
The following:
Must be placed in front of the CSS.
And I don't get what you want to do on number 2
Best Regards,
Shawn.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
Must be placed in front of the CSS.
And I don't get what you want to do on number 2
Best Regards,
Shawn.
- 10 Posts
- 0 Reply Likes
For no. 2, I need source code for CSS Drop down menu buttons for other site
- 486 Posts
- 26 Reply Likes
So you need a dropdown menu now?
This still doesn't make sense. Because you said:
I need source code for CSS Drop down menu buttons for other site.
Why do you do you have the word 'Buttons' in that sentence?
This still doesn't make sense. Because you said:
I need source code for CSS Drop down menu buttons for other site.
Why do you do you have the word 'Buttons' in that sentence?
- 10 Posts
- 0 Reply Likes
OK, it should be source code for CSS horizontal Drop down menu
- 6 Posts
- 0 Reply Likes
Hi Shawn,
I would really appreciate it if you could help me combine two (or more) scripts.
The first script is for an HTML expandable side navigation menu. I want to have the 'submenu' text open to an image in the same page, to the right of the navigation menu. The second code creates a table with no boarder to do it so that the navigation bar in the left cell opens images in the right cell. I do not like the navigation bar provided in the second code and would like to use the code in the first script. Lastly, if possible, I am trying to have the navigation open the submenu like an accordion and I do not have a code for that. The website that am looking at is (http://inezandvinoodh.com/)
Please let know if you can help.
Thank you!
R
I would really appreciate it if you could help me combine two (or more) scripts.
The first script is for an HTML expandable side navigation menu. I want to have the 'submenu' text open to an image in the same page, to the right of the navigation menu. The second code creates a table with no boarder to do it so that the navigation bar in the left cell opens images in the right cell. I do not like the navigation bar provided in the second code and would like to use the code in the first script. Lastly, if possible, I am trying to have the navigation open the submenu like an accordion and I do not have a code for that. The website that am looking at is (http://inezandvinoodh.com/)
Please let know if you can help.
Thank you!
R
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:none;
color:#000000;
width:140px;
padding:2px;
text-align:left;
font-family:copperplate,normal;
font-size:14px;
font-weight:100;
/*/*/border:0px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
background-color:none;
color:#000000;
width:140px;
padding:2px;
text-align:right;
font-family:copperplate,normal;
font-size:14px;
font-weight:100;
/*/*/border:0px solid #000000;/* */
}
<!--
A:link {text-decoration: none; color: #000000; font-weight:900}
A:visited {text-decoration: none; color: #000000; font-weight:900}
A:hover { text-decoration: none; color: #000000; font-weight:900}
//-->
\n')
document.write('.submenu{display: none;}\n')
document.write(' 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
New
Project 1
Project 2
Project 3
Project 4
Editorial
Client X
Client Y
Client Z
Advertising
Client X
Client Y
Client Z
Portraits
Name 1
Name 2
Name 3
Exhibitions
Date of Opening/Name of Show
Date of Opening/Name of Show
Contact

- 6 Posts
- 0 Reply Likes
Shawn Holman
When trying to display your code please put your code better
code
tags.Like this:
<code>
Your Code Here
But anyways, ill just make you a code out of scratch.
Now these are the questions.
1. Would you like your users to get a popup, giving them a choice to go to the new page, or a popup where there will be a little countdown and then it redirects them to the new page.
2. Would you like a cookie feature?
Please click to learn about a cookie
3. Other, state any questions or concerns.
Best Regards,
Shawn