|
CSS - Beating Heart Animation Interfering With Random Background Cycling Javascript
Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds.
However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again. I've managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I've learned today through tinkering with the scripts, that if I remove the variable "infinite", the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that. <b>What I want is this:</b> A heartbeat animation that's infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects. The heartbeat CSS-script: Code: }
.heartbeat {
width: 50px;
-webkit-animation: beat 1.0s ease-out infinite normal;
}
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.0) rotate(0deg);
}
65% {
-webkit-transform: scale(1.1) rotate(0deg);
}
75% {
-webkit-transform: scale(.9) rotate(0deg);
}
100% {
-webkit-transform: scale(1.0) rotate(0deg);
}
}
The background cycler (html-file): Code:
<?xml version="1.0" encoding="UTF-16"?><html><head>
<script src="configuration.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">body{background: black url('+WALLPATH+((Math.floor(Math.random()*WPNUM))+1)+'.'+IMGTYPE+');}</style>');
setTimeout("window.location.reload(false)",CHANGELENGTH*60*1000);
</script>
</head></html>
The background cycler (js-file): Code: var WPNUM = 2; var WALLPATH = "Wallpapers/"; var IMGTYPE = "png"; var CHANGELENGTH = 0.1; Similar TutorialsI'm having a CSS problem. Everythign i desinged worded fine until i included a <!DOCTYPE> I'm using XHTML 1.0 Strict and everything validates fine, as well as the CSS (according to w3c) Alink to the site: The "E" Proposition here is teh CSS code I am Using (the navigation links) Code: .Nav1 a:hover{color: #666666;}
.Nav1Td{border-right: 1px solid #999999;background-color: #000000;}
.Nav1{padding: 2px 0 10px 0px;font-family: MS Tahoma, Arial;}
.Nav1 .line{border-top: solid 1px #000000;margin: 5px 0 5px 0;}
.Nav1>.line{margin: 6px 0 4px 0;}
.Nav1 h4{margin: 4px 0px 5px 5px;font-size: 10pt;font-family: MS Tahoma, Arial;}
.Nav1>h4{margin: 4px 0px 4px 5px;}
.Nav1 h3{margin: 4px 0px 5px 5px;font-size: 8pt;font-family: MS Tahoma, Arial;}
.Nav1>h3{margin: 8px 0px 4px 5px;}
.Nav1 ul{list-style: none;margin: 0;padding: 0;}
.Nav1 li{margin: -4px 2px;width: 90%;}
.Nav1>ul>li{margin: -3px 2px;}
.Nav1 a{position: relative;background-image: url(images/off.gif);width: 115px;cursor: pointer;display: block;color: #000000;font-family: MS Tahoma, Arial; font-size: 9pt;padding: 2px 4px 4px 8px;margin: 1px 0px; text-align: justify;text-decoration: none;}
.Nav1>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 8px;}
.Nav1 a:visited{color: #000000;}
.Nav1 a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px 8px;background-image: url(images/over.gif);text-decoration: none;}
.Nav1>ul>li>a:hover{margin: 1px 0px;}
might i have made a careless error that CSS validator is not picking up on?? If I take out the doctype tag, everything works fine. But of course, i dont want to do that...heh any help would be greatly appreciated... Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random. .bg2 { background: url(testbg1.jpg) repeat -125px 0px; } for reference the two pages a 1) www.yahn.org/default.php 2) www.yahn.org/register.php ok both pages have 4 divs - div.main which has 3 divs inside of it. div.mainnav div.maininfo div.rightnav. the css for the divs is this Code:
div.main
{
clear: both;
font-family: verdana;
display: block;
}
div.maininfo
{
width: 60%;
display: block;
float: left;
margin-left: 2px;
}
div.rightnav
{
display: block;
float: right;
width: 18%;
}
div.mainnav
{
display: block;
float: left;
width: 20%;
font-size: 10px;
}
if you add up the widths its only 98%. yet on one page the div.rightnav gets dropped down and on the main page it doesn't. can anyone tell me how to fix this or why it is happening? I have divs within Divs to make background colour different to suit the template am making. Code: /* Document : default Created on : 18-Oct-2011, 10:25:09 Author : abeattie Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax recommendation http://www.w3.org/TR/REC-CSS2/ */ a { text-decoration: none; color:white; } root { display: block; } html { background-color: black; } #container { width: 800px; background: black; margin: 3em auto; } #header { overflow: hidden; height: 100% /* IE6 hack */ } #header img { margin-top: 2px; float: left; } #header ul#nav { float:right; font-size: 16px; position: relative; margin-top: 20px; } #nav li { display: inline; padding-right:27px; } #nav li a:hover{ color: white; text-decoration: underline; } #WhatsNew{ background: white; } #WhatsNewtitle{ color: white; margin-bottom: -30px; } #pictureinfo img { float:left; border: 2.5px solid black; margin-top: 5px; margin-left: 5px; margin-right: 5px; } #pictext { margin-top: -19px; float: right; width: 350px; height: 228px; } div.buttons { margin-top: 37px; color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 2.5px; margin-left: 115px; width: 70px; background: black; position: relative; }
that above is the css and below is the html. my problem is that one of my divs what is inside another div seems to be spilling out. http://imageshack.us/photo/my-images/811/unledtm.jpg/ as you can see the recent posts is taking up both the image and the text next to the image but that div is meant to be below and i have tryed everything i can think of. here is html. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="default.css" type="text/css"> <title></title> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="Black & White" /> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end header--> <div id ="WhatsNewtitle"><h1>What's New</h1></div> <div id="WhatsNew"> <div id="pictureinfo"> <img src="images/whatsnew.png" alt="Estore"/> </img> <div id="pictext"> <p> <h2>Project Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. usce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. Vestibulum ante ipsum primis in <div class="buttons"><a href="#"> Prev </a>|<a href="#"> Next</a></div> </p> </div> </div> </div> <div class="recent posts"> <h2>Recent Posts</h2> <div class="post"> <h2>Post Title</h2> <div class="postinfo"> <ul> <li><a href="#">Author</a></li> <li><a href="#">Date</a></li> <li><a href="#">Category</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Comment Count</a></li> </ul> <h2> 5 </h2> <img src="images/whatsnew.png" alt="Estore" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. </p> </div> <!-- end post info --> </div><!-- end post --> </div> <!-- end recent posts --> </div> <!-- end container--> </body> </html> i hope i have explained enough for someone to help but if not am sorry. thnaks in advanced beattie If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: Code: <!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" xml:lang="en" lang="en"> <head> <title>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... Hello all! I wasn't sure where to post this since I don't know where my problem lies, in css or php. In a nut shell, when displaying values from mysql database in a css div, the data is displayed correctly 9 times out of 10, but there is always that one time it is messed up. Thank you for your help. Let me know if you need to take a look at my code (it is pretty lengthy to be posted on here). Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. |
|||||||