I'm trying to adapt a template for my website. I'm no CSS guru, but I'm trying to find a way to change images on a timer. Problem is, the template is CSS and I don't know how to make a very simple slideshow. I'd just like to change the image every 5 seconds or so.
Here's what I have in the html file:
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Header Text</div>
<div id="headerSubtext">Header Subtext</div>
</div>
</div>
Here's the CSS stuff:
#mainPicture
{
clear:both;
width:670px;
height:345px;
background-color:#160306;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
margin-left:10px;
background-image:url(LOGO2.jpg);
background-repeat:no-repeat;
}
Any way to change the image url every few seconds to a different file?
That is not possible with just CSS. you need to leverage some sort of JavaScript to get this done as you said after an Interval of 5 seconds. You might want to use setTimeout() function. I had writted a script to change the background color of the page using JavaSCript. You might want to leverage this to change the image instead of the background color:
Here is the link:
http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/
And below is the DEMO:
http://jsfiddle.net/refhat/gJWFR/1/
I would suggest looking into some of the CSS3 properties, if it has to be strictly CSS. Otherwise I would look into Jquery.
Here is a link to CSS3
http://www.w3schools.com/css3/css3_transitions.asp
Related
Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.
This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/
You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript
I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!
jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.
What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.
I have a div with an ondragenter event. When the mouse is entering the div, I want the background to change to a specific image, but the image doesn't change until I let the mouse button up.
If I try to change to a background color, it works fine!
I have also tried to change css class with a background-image and it works, but in my case I can't do that because I don't know which image to show from the css.
HTML
<div id="test" ondrop="drop(event)" ondragenter="enter(event)"></div>
JavaScript
function enter(event) {
$('#test').css('background', '#333 url("test.png")');
event.preventDefault();
}
In my code example the div will get the color #333 when the mouse enters and then get the background image when I let the mouse button up.
I'm developing this in spotify which is webkit-based.
Does anyone have a clue how I can solve this problem?
Thank you!
On http://musicmachinery.com/2011/12/02/building-a-spotify-app/, it says:
Developing a Spotify App is just like developing a modern HTML5 app. You have a rich toolkit: CSS, HTML and Javascript. You can use jQuery, you can use the many Javascript libraries. Your app can connect to 3rd party web services like The Echo Nest. The Spotify Apps supports just about everything your Chrome browser supports with some exceptions: no web audio, no video, no geolocation and no Flash (thank god).
That being said, I recommend that you use Jquery. Not only is it easy to learn, but you have have access to JQuery UI (visit http://jqueryui.com/demos/ for demos).
As for your drag-enter/drop problem, I've made you an example using jquery. The demo can be found on HERE or http://jsfiddle.net/H8fPL/12/. I've also provided the code I used below. Let me know if you need anything else! Happy coding!
CSS:
div{
width:200px;
height:220px;
border:1px solid black;
}
#div1{
background-color:orange;
margin-left:20px;
}
.NC{
background:url("http://www.dreadcentral.com/img/news/jun11/niccage.jpg") no-repeat;
}
.surprised{
background:url('http://rlv.zcache.ca/smiley_oh_sticker-p217194901605792400envb3_400.jpg');
background-size:80px 60px;
background-repeat:no-repeat;
background-position:center;
}
JAVASCRIPT:
//needed for jquery,
//CALL THIS SCRIPT BEFORE USING $ syntax
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//query UI script
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
HTML:
<div id='div1'>
Come Hither...
</div>
<div id="dropme">
DRAG ME OVER AND WATCH ME CHANGE
</div>
IMPORTANT REFERENCES:
http://docs.jquery.com/Main_Page (Obviously)
http://jqueryui.com/demos/ (UI DEMOS)
http://jqueryui.com/demos/droppable/ (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://jqueryui.com/demos/draggable/#event-drag (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://oscarotero.com/jquery/ (jquery cheatsheet)
Let's say I have #button with a given background-image:url(images/some_background) and I want to change it to another background when I click it, let's say url(images/other_background).
HTML
<a id="button" ></a>
CSS
display: block;
height:100px;
width:100px;
background-image:url(images/other_background.png)
I tried this, but it doesnt work :
$(document).ready(function(){
$('#button').click(function(){
$('#button').css('backgroundImage', 'url(images/other_background.png)');
});
});
This works for me
CSS
#button{display: block; height:100px; width:100px;
background-image:url(http://cheeptalk.files.wordpress.com/
2009/05/smurfs-hefty-smurf-100x100.png?w=96&h=96); border:1px solid red;}
border to see easier only
code
$('#button').click(function(){
$(this).css('backgroundImage','url(http://images.mirror.co.uk/upl/m4/\
feb2010/9/3/mr-t-100x100-938742195.jpg)');
});
http://jsfiddle.net/jasongennaro/Lvnmw/
Obviously, you will need to switch out the images for your own.
If you are having trouble, check
That you are calling the jQuery script first, before this script.
That the path to your images is correct.
alittle off-topic, but you should consider using sprites instead of 2 completely seperate images.
Why? Becuase for slower connections and on certain browsers, the click event will cause a 'flicker' as the new image is being downloaded then loaded. Sprites will gaurentee the image is already loaded and so you just need to change the background-position to 'load' the new image.
Try this:
$("#button").css("background-image", "url(/images/otherbackground.png)");
OR
$(this).css("background-image", "url(/images/otherbackground.png)");
This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?
it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..
You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/
thickbox
eg: http://jquery.com/demo/thickbox/
For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript
You can use smoothbox, along with mootools.