|
HTML - The Question Of Making Slider In Html
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. Similar TutorialsOkay, 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. Hi 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! Hi I have some basic knowledge of HTML using notpad only. What i am trying to find out is. Am i able to make banners within notepad using HTML. Or what is the best way to make banners using HTML? I don't have dreamwever or anything like it . If i cant use note pad for making banners could you point me in the direction of free SW that can do thins using HTML? Thanks Gaz. Hello guys and girls! I'm currently working on a Web Design assignment for College, and I'm having a hard time trying to find the second way of building a lay out using HTML. We have done the table way of doing it, and I have got that way down, but i can't find out the other way. Could you guys maybe give me a little help, or at least a push in the right direction? Thank you! I have been asked by a client of make an e-mail for their product that has email elements in it like a picture and a logo that use HTML elements pretty much a page that you open in your e-mail window. I often get discount mailers from many businesses that do this kind of thing. I know a bit about making HTML/CSS pages but I have never done an e-mail that has that look to it. Does anyone know the process I would use to assemble something like that? Thx u for the help? Could anyone tell me how or what I need to know to make my own forum. Not using some Free, or expesive service. If I can make myself a forum. Or either way, I would also like to know how I can get a website so I can start my own Free forum hosting service. It seems easy, you know? Not much to do once you can create 1 forum. If anyone can give me lessons through MSN or AIM, or give me a website where it walks me through this, that would be the awsomenessest thing ever . Hello everyone. I am posting here to inquire about how one can have a quiz or quotient on one's website. I know that others have done it through HTML code, but I do not know how to do it myself. The quotient contains 40 questions, is multiple choice with three possible answers, and each answer gives either 1 point, .5 point or no points. Thanks, hopefully this isn't too confusing. I am not an amatuer, I'd think, but for some reason I am having trouble slicing up this image into a site (http://www.pigseldesign.com/tartan_mod.jpg). The top menu is the problem area, but I think my trouble comes into play due to me using tables. I haven't really delved into DIV tags yet to understand how to make it work in that form, but it doesn't seem like it would be difficult. I've just split the image into four columns and the menu falls into the 3rd. Problem is, when I make the cell's background the black/gray gradient, it spans to match the height of the patterned banner on the left (in another cell), even after I set the menu's cell's height to what it should be. I know there isn't much concrete information to work with, but any help would be greatly appreciated. Even if there were a program where I could just slap this in and have it spit out what I need. I just want the code clean, correct and looking right. Well there was something like this once before i think, and it was something about how if you click on a button, text will show up in a box without the whole page reloading. Now i want the same effect, but with images http://s93.photobucket.com/albums/l7...nt=gallery.jpg thats how i want the gallery to look. I dont want the whole page to have to reload each time you click a thumbnail, and i want to do this without php because my host doesnt support it. Hi I need to make a simple html file and need software to make it but I do not have any. What best free software is best to do it? And i am having a problem. Here is an example i made for the problem. It is being made my someone who has no knowledge of html in dreamweaver and then the code being tweaked by someone who knows html to be perfect. A sample line of code that comes up is this. <!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> </head> <body> <img width="195" height="755" src="file:///C|/Users/dog/AppData/Roaming/Adobe/Dreamweaver CS4/en_US/OfficeImageTemp/clip_image002_0003.png" align="left" hspace="12" vspace="10" alt="Text Box: blah blah. " /> </body> </html> When i try to test emailing the file the picture does not show up. I know the reason. It is because it is on my computer and it cant find it. But the question is how do i get around this? The pictures and pieces of the newsletter are being made in a combination of Microsoft Word and Photoshop. Would i have to upload each picture to the internet and do it that way? Or is there a way i can imbed the pictures into the newsletter? I am using this through a yahoo email address using a program that allows you to send emails with html content through emails that do not allow html, such as yahoo. I appreciate any help. Thanks in advanced. I am looking at making a simple photo gallery with HTML/CSS only, that looks like this: http://i56.tinypic.com/29aurzm.png Does anyone know a good way going about it? Hello. I was lurking on web in search for some kind of administration. I have simple web site and i want to add articles to site like in JOOMLA. Can this be done. Thanks in advance! Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in HTML? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks! Hi , how to add thick border for html table only for one side of the cell? Please let me know . Thanks hello guys! i have a question for you. i use this code to my blog (this is a media player made by photobucket) Code: <embed width="448" src="http://i171.photobucket.com/player.swf?file=http://vid171.photobucket.com/albums/u285/VBMAN/videaki.flv" height="361" wmode="transparent" type="application/x-shockwave-flash"></embed> and i want make this autoplay when i enter to my blog. Is there any code to help thank u I would like to prompt for name & email address without using php. Possible and if so, how? Hello, I run a videogame server along with a website for content management. Right now im trying to find a way to display a page with a box inside it that transitions pdf files located in a file on the server. The file would follow as so http://www.voidcraft.net/other/rand/...3681823623.pdf It would also have 4 buttons at the bottom one with a arrow pointing right that would transition to the next. one the the left which would make it go back to the one before. There would also be a approve and decline. The approve would email the email on the pdf or have a box pop up that asks for the email and then send the pdf to a approved folder. The decline would do the same except send a different email and send to a different folder. I have no idea what so ever how to do this. I am only partially experienced in Html and this just goes over my head. Is there a chance that anyone could help me out here? Code:
<hx:outputLinkEx styleClass="outputLinkEx" id="formPdfLink"
onclick="return openPDFWord(this, '#{varsearchResults.targetURLForPDF}');"
value="#{varsearchResults.pdfURL}">
<h:outputText style="color:red;" styleClass="outputText"styleClass="outputText" id="text7" value="#{varsearchResults.formIdAndEditionDate}" escape="false"> </h:outputText>
</hx:outputLinkEx>
Here i threw in the tag style = "color:red;" into my dynamic print code in my jsp file. I'm trying to get just these links to change color when clicked. Is there a way to use vlink? I tried style = "vlink:red" which didn't work. Any help on how to make that happen would be greatly appriciated. Regards, Will |
|||||||