Html Can you run css code from javascript? - javascript

I am making a canvas on my website that you can draw on. To achive this effect I draw a fillRect everytime the mouse moves, at the mouseposition. Everithin works fine but when i try to add a background image, it hides everything. I tried using canvas.drawImage();
Then I found that you can add Background image from CSS, using: background:url(pic1.jpg);
This workes fine, but I dont want to the image to be there from load, but load when the user clickes a button. Anny Idea how to do this? Can I call the CSS from Java like you can from HTML, or is there another way. Thanks for answers

You can use JavaScript to programmatically set the CSS that defines the background.
var img = "some_image.png";
element.style.backgroundImage = "url(" + img + ")";
Make sure to change the element with the actual HTML element you want to set the background image on.

You can use HTML DOM to do this like the code below
<button type="button"
onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>

You need something like that:
handling the event (in thi example click)
Append the new css property to the element target
function appendImg() {
document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}
#result {
width: 500px;
height: 400px;
background-size: 100% auto;
background-repeat: no-repeat;
visibility: visible;
}
<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>

Related

Responsive Image without CSS otherwise messes HTML page

I have a responsive web page which inside a Div tag i have an IMG tag as follows:
<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
</div>
It runs great on desktop, However, Using CSS with #media would be great if i didnt touch this code in the Div tag above. When i comment or delete this code inside the Div tag and use CSS to add the same image using CSS, It appears zoomed in and ugly and not like it is in Plain old Static HTML so its why i am trying to avoid using CSS and instead a different way like using Javascript possibly.
This is the code i use in CSS which comes out ugly:
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
}
It comes out Zoomed in and ugly and well i tried everything i can including changing the height and width like in the IMG tag and its frustating that it wont come out as it does in the IMG tag in the html code.
Is there any possible way of doing this Using Javascript where the Phseudo code will go ass follow:
<script type="text/javascript">
//Phseudo Code
if (mobileScreenSize == 480){
//Mobile Image
<img src="img/mobileImage.jpg" height="500px" width="100%">
}
else
{
//Regular desktop image
<img src="img/bg.jpg" height="500px" width="100%">
}
</script>
I dont know what else to try, and i want to avoid using the CSS since it doesnt seem or i donnt know how to make it come out as it does using the HTMl IMG tag.
When you want to use CSS to modify the background image, you need to set the "background-size" property. For example,
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}
If you want to take the javascript approach, then that's also fine and the way you add an image to a div is by doing something like this.
var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");

Need concept while rotating the images in jquery?

I am implementing the rotation one at a time using jquery. I have some images I want to rotate one at a time using maybe "touchmove", or "swipeleft" or "swiperight".
First, I make a background where I can place my all images. My problem is that can I give a static value (top left) in starting and change the top and left value on swipeleft and swiperight event.
This is what I want to achieve:
My code:
<body>
<div class="outer-container">
</div>
</body>
.outer-container{
background-image: url(images/dial.png);
width: 400px;
height: 403px;
background-size: cover;
top: 280px;
left: 32%;
position: absolute;
}
This is what it looks like right now:
For adding new images:
Just put a bunch of these: <img src="--path--" style="position:absolute;top:--value--;left:--value--;" id="--uniqueID--"></img> and replace --path-- with the path to the image and --value-- with the appropriate positions. Also replace --uniqueID-- with a unique ID (no two pictures should have the same ID).
I'm not completely sure what you're asking, but you can include a stylesheet in your page to set initial top and left values, and then use jQuery's .css() to dynamically change those values.
$('.outer-container').on('swipeleft',function(e){
e.preventDefault();
$('#--uniqueID--').css("left",newLeftValue);
$('#--uniqueID--').css("top",newTopValue);
});
replace --uniqueID-- with the picture you want to move.
Replacing newLeftValue and newTopValue with appropriate values.
See http://api.jquery.com/css/ for more information on jQuery's css method.

Changing picture on mousemove in javascript

I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?
Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.
You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}

Show a div on click with cuepoint

Why won't this work?
Using cuepoint.js; you can define cue points within the html5 video.
But; I'd like to; in addition display a #div on click. And ONLY on click.
Once the video resumes; or the image is clicked again; the video resumes and the #div will disappear!!!!
#playdiv1 {
display: none;
}
$('#1').click(function() {
cuepoint.setTime(1)();
$("playdiv1").style.display = "block"; // Why wont this work?
});
This div should show along with the que:
<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">
</div>
Library in reference;
http://cuepoint.org/
FULL CODE ~
http://pastebin.com/HG0wVVaK
This doesn't make sense. THE cuepoint time; works..
$('#1').click(function(){
cuepoint.setTime(0)();
But when I add the '$('#playdiv1').show();' right underneath it. It doesn't work?
$('#1').click(function(){
cuepoint.setTime(0)();
$('#playdiv1').show();
});
Your selector is wrong.
Your code, $("playdiv1"), matches elements of type <playdiv1></playdiv1>, which isn't what you want.
The correct code, $("#playdiv1"), selects the element with id playdiv1.
You're also attempting to set the style attribute on the jQuery wrapper around the element. You need to either use the .show method, or access the first matched element.
Either of these will work:
$('#playdiv1').show();
// or
$('#playdiv1')[0].style.display = "block";
Since you have the CSS hiding the playdiv1 you do not need a display declaration inline with your HTML, so remove that -
<div id="playdiv1" style="min-height: 300px; min-width: 500px;">
and change the jQuery to
$('#playdiv1').show();
You can use this...
$('#1').on('click', function() {
cuepoint.setTime(1)();
$("#playdiv1").show();
});
And remove display: hidden; of the style property in the <div> tag...
Switching the order somehow worked;
$('#1').click(function(){
$('#playdiv1').show();
cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});

DIV with text over an image on hover

OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..
Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}
#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.
If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>
I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.

Categories

Resources