|
HTML - Javascript Div Slider - Make Dynamic?
Would anyone mind sharing a hint as to how i might go about making this dymanic?
i thought i could just use "elementid" but i didn't have much luck... or just a different script all together, just something simple and light to slide a div from point "a" to point "b" with thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
x=50
y=0
distanceX = 0
distanceY = 0
function slideDown() {
if (document.getElementById)
{document.getElementById("mydiv").style.top = x + "px";}
if (distanceX > 50)
{clearTimeout('slideDown()'),x=parseInt(x),distanceX=parseInt(distanceX);}
else {x=parseInt(x) + 1,distanceX=parseInt(distanceX) + 1,timer1=setTimeout('slideDown()', 15);}
}
</script>
</head>
<body>
<div id="mydiv" style="position:absolute; width:50px; height:50px; top:50px; background-color:#F00;"></div>
<a href="#" onclick="slideDown('mydiv');">Down</a>
</body>
</html>
Similar TutorialsHi guys. I hope u can help me with my blog: http://thefilmpolice.blogspot.com/ As you may notice, my featured post isn't showing up as a content slider, anyone can help me out??? This is my full HTML: http://www.mediafire.com/download.php?628ek0f1488sx26 Thanks in advance! Hello, I'm having trouble with javascript on my website. Hopefully somebody here can help me out. The website is http://www.mm-theory.com The problem arises when you click on the little asterix in the left-hand margin, the one that says "click me" underneath. It tells you you need to have javascript enabled even though you may already have it enabled. I get this problem only when I have the omni slide menus at the top and the right side (the ones that say "quick links" and "papers" and open up when you move the mouse cursor over them). I got the code from http://www.dynamicdrive.com/dynamici...lide/index.htm and followed their instructions to the letter. I don't get this problem when I remove the menus. The code for the asterix link is as follows: Code: <a class="margin_icon" onclick="openWin('deeper_problem.htm','',600,1);return false;" href="enablejs.htm" target=_blank>
<img class="margin_icon" src="icons/side.gif" alt="side.gif" border=0>
<br>
<span class="margin_icon">
Click Me!
</span>
</a>
The code for the openwin function is as follows: Code: function openWin(url,name,wid,hgt) {
sw=(screen.width-wid)/2;
sh=(screen.height-hgt)/2;
newwin=window.open(url,name,'width='+wid+',height='+hgt+',top='+sh+'+sh+',left='+sw+',scrollbars=0,menubars=0,toolbars=0,directories=0,location=0,address=0');
mewwin.focus();
}
This function is made available on the home page I linked you to (http://www.mm-theory.com) by the following code in the head section: Code: <script language="javascript" type="text/javascript" src="openwin.txt"></script> Can anyone tell me why it says I need to enable javascript when javascript is already enabled? Hi Folks, I've got my form dynamically generating text fields (which are contained in a form which is in another) and other objects and now I want to give them the "onchange" attribute. I have a lot of code so I'll keep it as small as possible. Here is the function that generates text fields function createText( inputForm, txtName, txtValue, txtWidth ) { var newTxt = document.createElement( "INPUT" ); inputForm.appendChild( newTxt ); newTxt.name = txtName; newTxt.setAttribute( "STYLE", "position:relative; left:20px; width:" + txtWidth + "px;"); newTxt.type = "TEXT"; newTxt.value = txtValue; newTxt.id = txtName; newTxt.onchange = "some_function( this.value )"; return newTxt; } The function for responsible for creating the form is: function createNewForm() { // Main form is a global reference to the main body mainForm = document.getElementById( "adminForm" ); var profileForm = document.createElement( "FORM" ); mainForm.appendChild( profileForm ); profileForm.method = "POST"; profileForm.name = "Profile"; profileForm.id = "ProfileForm"; return profileForm; } This function calls the profile creation form and specifies the objects that will appear on the form. function profileForm() { // Delete and reassign current form if( currentForm != "") deleteForm( currentForm ); currentForm = "ProfileForm"; var newProForm = createNewMenuForm(); newProForm ( menuForm, "Item1", "data1", 140 ); newProForm ( menuForm, "Item2", "data2", 140 ); newProForm ( menuForm, "Item3", "data3i", 140); return newProForm; } I've seen examples of objects being created by JavaScript and they work just fine. Anyone have any suggestions or have an idea where I can find some more info? Thanks! hello everyone. i was using a slider on my website. but unfortunately the alignment doesnt work well. the nos (1,2,3 and 4) appear towards to the left side and i want it on or below the image. the following is the html, css and js codes Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="CSS/Slider2.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<title>Effect of sugar on the body, how and why insulin is secreated and how to control diabetics.</title>
</head>
<body>
<div id="wrapper">
<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="Images/how to choose the right protein.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="Images/Simple post workout recovery tactics.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="Images/sugars, carbs and insulin.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="Images/foodtypes.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong> </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":""},{"id":"slide-img-2","client":"","desc":""},{"id":"slide-img-3","client":"","desc":""},{"id":"slide-img-4","client":"","desc":""}];
</script>
</div></div><!--/header-->
</div><!Wrapper>
</body>
</html>
slider2.css CODE Code:
* {
margin : 0;
padding : 0;
}
html {
height : 100%;
}
body { background-color:#ccc;}
#wrapper {width:950px; margin:0 auto; background-color:#000;}
a:link, a:visited {
color : #fff;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 950px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 950px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 299px;
background : url(images/header-bg.png) no-repeat 50% 0;
}
div#header div#slide-holder {
z-index : 40;
width : 950px;
height : 299px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 973px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 973px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/silde-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}
script.js code Code: window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
+'\nError description: \t'+desc
+'\nPage address: \t'+page
+'\nLine number: \t'+line
);*/
}
$(function(){
$('a').focus(function(){this.blur();});
SI.Files.stylizeAll();
slider.init();
$('input.text-default').each(function(){
$(this).attr('default',$(this).val());
}).focus(function(){
if($(this).val()==$(this).attr('default'))
$(this).val('');
}).blur(function(){
if($(this).val()=='')
$(this).val($(this).attr('default'));
});
$('input.text,textarea.text').focus(function(){
$(this).addClass('textfocus');
}).blur(function(){
$(this).removeClass('textfocus');
});
var popopenobj=0,popopenaobj=null;
$('a.popup').click(function(){
var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
var pobj=$('#'+pid);
if(!pobj.length)
return false;
if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
popopenobj.hide(50);
$(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
popopenobj=null;
}
return false;
});
$('p.images img').click(function(){
var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
$(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
$(this).parent().find('img').removeClass('on');
$(this).addClass('on');
return false;
});
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
$('div.sc-large div.img:has(div.tml)').each(function(){
$('div.tml',this).hide();
$(this).append('<a href="#" class="tml_open"> </a>').find('a').css({
left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
}).click(function(){
$(this).siblings('div.tml').slideToggle();
return false;
}).focus(function(){this.blur();});
});
});
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
if(!slider.data || !slider.data.length)
return false;
var d=slider.data;
slider.num=d.length;
var pos=Math.floor(Math.random()*1);//slider.num);
for(var i=0;i<slider.num;i++){
$('#'+d[i].id).css({left:((i-pos)*1000)});
$('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
}
$('img,div#slide-controls',$('div#slide-holder')).fadeIn();
slider.text(d[pos]);
slider.on(pos);
slider.cur=pos;
window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
if(!slider.ar)
return false;
var next=slider.cur+1;
if(next>=slider.num) next=0;
slider.slide(next);
},
slide:function(pos){
if(pos<0 || pos>=slider.num || pos==slider.cur)
return;
window.clearTimeout(slider.al);
slider.al=window.setTimeout('slider.auto();',slider.at);
var d=slider.data;
for(var i=0;i<slider.num;i++)
$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
slider.on(pos);
slider.text(d[pos]);
slider.cur=pos;
},
on:function(pos){
$('#slide-nav a').removeClass('on');
$('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
slider.cr['a']=di.client;
slider.cr['b']=di.desc;
slider.ticker('#slide-client span',di.client,0,'a');
slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
if(slider.cr[unique]!=text)
return false;
ctext=text.substring(0,pos)+(pos%2?'-':'_');
$(el).html(ctext);
if(pos==text.length)
$(el).html(text);
else
window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
htmlClass:'SI-FILES-STYLIZED',
fileClass:'file',
wrapClass:'cabinet',
fini:false,
able:false,
init:function(){
this.fini=true;
},
stylize:function(elem){
if(!this.fini){this.init();};
if(!this.able){return;};
elem.parentNode.file=elem;
elem.parentNode.onmousemove=function(e){
if(typeof e=='undefined') e=window.event;
if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){
e.pageX=e.clientX+document.documentElement.scrollLeft;
e.pageY=e.clientY+document.documentElement.scrollTop;
};
var ox=oy=0;
var elem=this;
if(elem.offsetParent){
ox=elem.offsetLeft;
oy=elem.offsetTop;
while(elem=elem.offsetParent){
ox+=elem.offsetLeft;
oy+=elem.offsetTop;
};
};
};
},
stylizeAll:function(){
if(!this.fini){this.init();};
if(!this.able){return;};
}
};
please help. Hi, I have a question about a CSS slider I am trying to incorporate into my website. Basically, each slide corresponds to an anchor (#slide1, #slide2, etc). When I click on the tab to open the slide, the entire webpage shifts downward so that the slider is positioned the very top of the browser. It's just like how certain websites like Wikipedia anchor to another part of the webpage so you don't have to scroll down, you can just click the link and it will bring the web page straight to that location. I don't want the slider to shift when I click on the link. I want to keep it so that if you click on the slider anchor, it remains in the same location. The only action should be the new tab opening up. To show an example, I am using a slider comparable to the one found he http://www.csslider.com. It's not the exact same, but as you can see the page shifts down when you click on a slide. Is there any way to rectify this issue easily? Thanks in advance Hello, I purchased a template off template that uses jquery and I am using Dreamweaver to edit it. As you can see --> http://thegamingtech.com/template The center buttons don't work. Here is an image of the three buttons I am talking about: http://d.pr/8w4g If you click on AC III button, it won't change pages even though it is linked. Any ideas? i won't a image slider for my joomla home page now i have found many image sliders. but all this image sliders must i gave a height en weight and he make the pictures on that size. have somewane a script that don't ask that and used the size of the picture inplace of the size of the box or that he autosize the picture. but i mus't get the image from a folder on the server inplace of the picture link in the script Hello, I am working on a wordpress driven site http://www.bigbrotheraustralia.com.au/CMS/wordpress/ The front nivo slider is having some trouble loading and behaves differently with different browsers. It was working fine not too long ago and hasnt been touched. How can this be fixed? as you can see it is semi loading and just displaying the tops of the pictures (firefox) and in IE it doesnt transition. HELP! I want to ask about making a slider in html. Is there a way to create photo beams run continuously, forming the slider. Hope some help. hi there, I am using this technique: http://www.smoothdivscroll.com/ im in a fairly complicated situation, if you take a look at my site here you will see a set of 4 images aligned neatly... well, they need to scroll to the left, slowly.. we just need to get the scrolling to work. Later on I can customize the options myself. I think the scrolling is failing to start because a lot of scripts are already loaded.. maybe there is a conflict somewhere? I dont know where to look to be honest.. could someone point me in the right direction? Thanks a bunch Okay, so the title...I didn't really know what to put. I'm having serious issues trying to find/alter a string of code on my site. It is currently in a box along the side with a show/hide button to make it retract and expand, but its default is open which is rather annoying. I really hope this is HTML and not Javascript, but I'm a complete newb when it comes to programming so I'm honestly clueless. HERE is a link to my site, if you want to see exactly what I'm talking about. As for the code, I don't know where the specific problem is, so I'm sorry for this, but I'm going to paste most of the header. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sideb").click(function(){
$(".cbox").slideToggle("slow");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.accordionButton').click(function() {
if($(this).next().is(':visible')) {
$('div.accordionContent').slideUp('slow');
} else {
$('div.accordionContent').slideUp('slow');
$(this).next().slideDown('slow');
}
});
$("div.accordioncontent").hide();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div.accordionbutton").mouseover(function(){
$(this).removeClass().addClass("acchover");
}).mouseout(function(){
$(this).removeClass().addClass("accordionbutton");
});
</script>
<style type="text/css">
body {
background-position: top center;
margin-left: 225px;
}
input, textarea, select {
background-color: #f4f7f9;
border: 1px solid #f4f7f9;
font-family: verdana;
color: #727f85;
}
.menubg {
height: 30px;
}
.menubg a {
padding: 2px 4px 2px 4px;
text-align: center;
font-family: helvetica;
font-weight: 100!important;
text-shadow: #c3cdd4 1px 1px 0px;
text-transform: uppercase;
letter-spacing: -1;
font-size: 15px;
text-decoration: none!important;
color: #374a6c!important;
}
.menubg a:hover {
color: #6b7fa2!important;
text-decoration: none!important;
background-color: transparent!important;
}
a:hover, a:active {
background-color: #cdd8de;
text-decoration: none;
}
.catbg {
border-bottom: 5px solid #21314d;
text-align: right;
text-shadow: #21314d 1px 1px 0px;
font-family: helvetica neue;
font-weight: 100!important;
background: url(GRADIENT URL HERE);
}
.cattext {
font-weight: 100!important;
text-transform: uppercase;
padding-right: 20px;
margin-top: 5px;
}
.titlebg {
border-top: 5px solid #21314d;
font-family: helvetica neue;
text-transform: uppercase;
padding-left: 6px;
font-weight: 100!important;
text-shadow: #21304c 1px 1px 0px;
}
.titletext {
font-weight: 100!important;
}
.titletext {
color: #404040!important;
}
.button {
margin-left: 2px;
margin-right: 2px;
font-size: 9px!important;
text-transform: lowercase!important;
padding-right: 4px;
}
.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}
a.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.sideb:hover, a.sideb:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}
div.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.accordionButton:hover, a.accordionButton:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
}
a.side:link, a.side:visited {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}
a.side:hover, a.side:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}
h3.aegis {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 20px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}
h4.aegism {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 0px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}
.content {
background: url("SIDEBAR BG MAIN URL HERE (LIGHT BLUE)");
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
color: #57636a;
margin-top: 0px;
}
p.update {
background-color: #dddddd;
border-bottom: 3px solid #ababab;
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
margin-top: 0px;
}
p.roma {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 10px;
margin-bottom: 0px;
}
p.maintext2 {
background-color: #c6cfd4;
text-align: center;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.6;
opacity:0.6;
margin-top: 0px;
}
.transimage {
float: left;
margin-right: 4px;
border: 3px solid #4a5a71;
width: 80px;
height: 80px;
-moz-opacity: 0.8;
opacity:0.8;
}
#sidetables {
margin-left: 13px;
width: 230px;
border-left: 5px solid #18253f;
border-right: 5px solid #18253f;
border-bottom: 5px solid #18253f;
}
p.slide
{
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 2px;
margin-top: 2px;
text-decoration: none!important;
}
div.accordioncontent {
display: none;
}
.acc {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 2px;
margin-bottom: 0px;
}
div.cbox {
background-color: #eff3f5;
padding: 8px;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 2px;
margin-bottom: 0px;
}
.bordercolor {
padding: 5;
}
</style>
<script type="text/javascript">
<!--
/* fix text menus by ross */
var startChar = ''; //Start character
var dividerChar = ''; //Dividing Character(s);
var endChar = ''; //End character
//no need to edit below
var menu = document.getElementsByTagName('td').item(5).firstChild;
var a = menu.innerHTML.replace(/^\n?(<.+?>)\[/, startChar+' $1');
var b = a.replace(new RegExp('\\](<\/a>)(\\n|\\s|&nb'+'sp;)*$', 'i'), '$1 '+endChar);
var c = b.replace(new RegExp('\\](<\/a>)(&nb'+'sp;|\\s)(<a.+?>)\\[', 'gi'),'$1 '+dividerChar+' $3');
menu.innerHTML = c;
//-->
</script>
<!-- =====
START Smangii's {LEFT} Side Tables *REVISED*
Global Header
===== -->
<table align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td vAlign="top">
<div style="position: fixed; left: 0px; top: 0px; width: 258px; height: 845px; background: url(SIDEBAR BG URL (DARK BLUE) HERE); color: #202e4c; border-right: 4px solid #78839b;">
<!-- ===== SIDEBAR ===== -->
<table id="sidetables" cellpadding="0px" cellspacing="0">
<tr style="margin-top: 200px"><td class="iro" align="center"><div class="content"><br>
<h3 class="aegis">cbox</h3>
<center><br><a href="javascript:void(0);" class="sideb">click to hide/show</a>
<div class="cbox">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="0" width="200" height="245" src="http://www3.cbox.ws/box/?boxid=3366059&boxtag=rkhyky&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3366059" style="border: 0px solid;" id="cboxmain3-3366059"></iframe></div>
<Cbox here>
</div>
<!-- END CBOX -->
</div></center>
I really hope someone could help me with this ^^; please and thank you very much. Hello, Is there a way to hover text over a Jquery slider? Here is what I am working with. http://chocotemplates.com/portfolio/portfolio-2/ Hello! I am new here, I know CSS and HTML basics and would like to ask you how to put a vertical slider inside a table cell. Thank you! please help me guys!!! im trying to find a html code that allows people download a pdf files from the website that im trying to make..anyone out there help me.. hello people, I checked the other day how is easy to have a slider with html5 and how great looks, but I was wondering how can I use it to control the font size or color of the font or background. I use already the font size option for the user to my blog's posts but with javascript and by clicking on two images (plus, minus). A simple slider would be perfect but I cant find on internet how can I get the values from slider and feed the size or color. I only found one tutorial on html5 slider which just prints the number on the slider. I am not an excerpt so any help will be much appreciated. cheers im wondering if any1 can help me figure out how i can keep my domain name and link it to my Apache Home Server with a Dyanmic IP i have tried no-ip.com but i dont like having sitename.no-ip.com i want sitename.com does any1 know a way to do this?? My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. 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=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
I also want to be able to make my website more interactive in this way: when I click on one table cell, another cell appears below, which can then be clicked on. Is there a way to do this with CSS and/or HTML, or will I have to resort to Flash? Hi, Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too? |--------------------------| | | | 100% | | | |--------------------------| | 50px | | | |--------------------------| something like that. well, it actually work in firefox and not IE, and i cant solve the problem. Thanks in advance. |
|||||||