|
HTML - How Do I Make This Banner Automatically Fade?
Hi guys, we're using a WordPress theme for a clients site and we'd like to know how to make the hero banner on the home page automatically rotate?
http://www.anchorhotelhaydonbridge.com/newsite/ Thanks in advance, Paul Similar TutorialsI'm using a jquery plugin that creates a grid view using a table. Inside the cells i have text areas that i'm manually sizing using the rows attribute, to fill the td. It's not working very cleanly though. Does anyone know of a way to get text areas to automatically size themselves to a containing td? thanks, max Hello. I have a flash header on my page with links. When each link is pressed, the appropriate .html page is loaded into the iframe, which i have defined with this code: Code: <iframe name = "mainframe" src="home.html" width="746" height="800" frameborder="0" align="middle"> The problem is, the different pages that will be loaded into 'mainframe' have different heights, and i would like the iframe to adjust to these heights without adding scrolling bars. How would I do this? Hi, how do I make the boxes in the store part of my website automatically resize so that the more info button and add to cart buttons are not outside of the box?. P.S. I DO NOT want to make it scroll, I just need it to resize. Thanks in advance! Hello, I'm trying to add a similar function like "www.vinesauce.com" but I don't know how... I've programmed for 1 week only and I need some help. My site is made with html and css and here's the link to my site, http://razestream.com I appreciate help. Hi everyone, I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click. What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view. Here's an illustration of what it looks like: I got everything working now except for two annoying problems: - The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play) - When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing Here is my code so far: I've simplified it to two content pages so it's easier to read. HTML: Code: <meta charset="utf-8">
<title>The Elements of Go</title>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--CSS for html-->
<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
<!--FADE-->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { showWindow("mainpage") }, 2000);
$('.aboutbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("aboutpage"), 2000);
} );
$('.mainbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("mainpage"), 2000);
} );
function hideAllWindows() {
$('#mainpage').fadeOut();
$('#aboutpage').fadeOut();
$('#historypage').fadeOut();
$('#referencespage').fadeOut();
$('#strategiespage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
</head>
<body>
<div id="backgroundcontainer">
<div id="mainpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head to about page-->
<a class="transition aboutbutton"><img src="some image">
</a>
</div>
<div id="aboutpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head back to main page-->
<a class="transition mainbutton"><img src="some image">
</a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
/*The webpage background image*/
body {
background-image:url(../pictures/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
#backgroundcontainer {
display:block;
margin-left:auto;
margin-right:auto;
}
/*background image for the content pages*/
#mainpage,#aboutpage {
background-image:url(../pictures/background.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
overflow:hidden;
display: none;
margin-left: auto;
margin-right: auto;
position: relative;
width:800px;
height:570px;
}
#mainpage img,#aboutpage img {
position: absolute;
border:none;
width: 119px;
height: 119px;
}
Thanks for any help! So the plan is to play this sound MP3 as soon as the site gets entered. I also need it to loop untill the person clicks on either Dutch or English.. and gets directed towards the destined homepage where the MP3 file fades out within about 10 seconds. My question.. can I do all the above with HTML? I thought about editing the last part of the mp3 file manually so ill make it fade and then just play that faded mp3 as soon as the destined homepage gets entered.. but that wont be possible, since i dont know at which point the user clicks on Enter site... So I need to make a background to a <div> with a color fade in it. Here's the catch: The application is a Joomla template, so the <div> height will be very variable, and will always be getting longer as additional content is added, so the standard trick of just making a gradient image and setting repeat x won't work. So what I need is a way to basically have two different colors (the starting and ending colors for the gradient) and have the browser always render that gradient regardless of the element height, 1000 px, or 10000 px. Is this possible? At the moment I have a color fade on the left side of our website behind the links. I am using the onmouseover and onmouseout commands to change the color when someone puts their cursor over the link. I have no problem changing the background color when the mouse is over the link, but I can't find a way to return it to the color fade background after someone removes their mouse. Any ideas as to what I should put in the onmouseout spot to get it to return to the original fading background? <tr> <td width="200" valign="top" style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#F5F5F5', startColorstr='#CAF0F7', gradientType='1'" ><table width="87" height="155" border="0"> <tr> <td><table width="200" height="229" border="0" cellpadding="0" cellspacing="0" bordercolor="#F5F5F5" id="navigation"> <tr> <td width="200"><div align="center"><a href="Homepage.html" class="navText style3" onmouseover="style.backgroundColor='#CAF0F7';" onmouseout="????????" ><font color="#5A434A"><span class="style5">Home</a></div></td> </tr> thanks Hello, I am trying to achieve something in html that im not sure is possible, but i have been told it is. If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up? for example. if i have this: <p>hello, please click <a href="#">here</a> to change this text</p> when the user clicks the link, the line pops out and the following line pops in in its place: <p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p> Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it? I appreciate any help. thank you. Ben. edit: i no longer need the text to fade, it just has to swap the lines of code on click. I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect? Hello, I am using some Jquery code + CSS to display fade in and out text above each image. However, i can't figure out what I am doing wrong and the text is not being displayed when the user hovers the mouse over each image.. http://www.greekconcierge.com/group.php Any ideas? best regards, Andy ok so I found this code online: HTML Code: <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span
onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }"
onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})"
></span></a></div>
</div>
can someone help me understand it and potentially get it to work? I know this is something simple, but I can't remember how its done. But how can I have a form go to the bottom of a page? I'm making a chat, and everything works fine. Except whenever you submit something it goes back to the top of the page. So how do I force it to the bottom? I'm trying to set the following banner up on my site but when I paste the code at the end of the page the banner keeps appearing at the top of the page. Can anybody explain why? <div style="z-index: 110; position: absolute; width: 468px; font-family: arial,sans-serif; background: url("http://outils.acf-webmaster.net/bann...2482.gif") repeat scroll 0% 0% transparent; height: 60px; color: rgb(255, 255, 255); font-size: 12px; top: 26px; left: 34px;"> <div style="position: absolute; line-height: 110%; width: 200px; top: 1px; left: 55px;"> <font xmlns="http://www.w3.org/1999/xhtml"><font xmlns="http://www.w3.org/1999/xhtml"> <font size="1px;"> <strong> <font face="Verdana"> 280 different <a style="color: rgb(255, 255, 2); font-size: 10px;" href="http://www.casinoriva.com/en/" target="_blank">online casino</a> games await for you. </font> </strong> </font> </font></font></div> </div> My site is: h1.ripway.com/shsepac How can I make the banner so there is no space at the top and at the bottom? Hi everybody I am a new member. I'm not to experienced with css style sheets or html and have a small problem. I have attached code. My website is www.intelligentstudentfinance.com I want to move the banner at the bottom of the financial aid page to the extreme right but not sure what the code is. I have attached the code in txt format and commented the banner I want want moving to the right. Look forward to your replies Thanks Hey, i have a problem with my banner(logo) I want the banner to be at the top, not underneath it. I want it to be centered and at the top, stuck to the border or something, like at http://habblogg.net, here is my site http://habbxtra.net Please help anyone Hello all, I have recently set up a website for my gaming servers. http://www.accurategameserver.110mb.com As you can see on my site, it has all the recent game changes etc. I find it really anoying and time consuming to have to keep flicking back and forth to change each section data and its usually only like one small change. Any way that I can change it so that it automatically updates to a set image/text on a seperate page? Last question is, how do ou make a registration form on your website without mysql and send out automatic emails. Thanks all in advance. Cheers Don't forget to register to my website for gaming goodness Im not sure if this an html, php, or javascript question but here goes. I am trying to set up a place at my sight where I can have a content page from a certain link update automatically. For example, I want to create a 30 day journal link where each day a new journal page would come up. To my understanding I know I would have create a folder that would have 30 separate html pages. But my question is how can I set up the site that each page would automatically update according to day and time. Let's say that at 12:00am midnight a new html page with new content would be available for the reader. I don't have a lot of time to manually update the link with new content, so I want the site to do it on its own each day. Am I making any sense? I just need to know how I can have content automatically update each day without my needed to go and do it manually every day. Any help would be appreciated....thx so much. Evening all, I'm looking for some simply coding to tell an image to resize to fit into a frame that is defined in the CSS layout. The image size needs to be reduced to 630x402, the original size is much greater. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/main_img.jpg' theImages[1] = 'images/main_img2.jpg' theImages[2] = 'images/main_img3.jpg' theImages[2] = 'images/main_img4.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> <div id="main_img"><SCRIPT LANGUAGE="JavaScript">showImage();</script></div> I need someway of implementing the size change into the coding somewhere. Thank you for any help in advance! |
|||||||