I've seen the other post with pretty much this same question, but I don't understand how to implement it. I've got a .css file that is linked to my html file. How would I use "blurfast.js" to get a blurred div background? Can I just do something like this?
mydiv {background:blurfast;}
in my .css file?
No, in JS:
<script type="text/javascript">
Pixastic.process(domeDiv, "blurfast", {amount:1});
</script>
This is made to work only on images so will not work for your requirements as far as I know!
for an image the javascript below should work!
<script type="text/javascript">
var img = document.getElement("myImage");
Pixastic.process(img, "blurfast", {amount:1});
</script>
Related
I have an autogenerated layout looking like this created by the jQuery.PrettyTextDiff-plugin:
<head>
<script type="text/jaascript" src="the jquery library"></script>
</head>
<body>
<div class="diff">
<span>
<br/>
</span>
Continuing layout...
</div>
<script type="text/javascript" src="diff_match_patch.js"></script>
<script type="text/javascript" src="jquery.pretty-text-diff.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.diff span:first-child').remove(); // As of my last try
});
</script>
</body>
I wish to remove the first span inside the 'diff'-layout in runtime but I can't get it to work. I've tried several solutions found here at SO after a thorough research.
$('.diff').closest('span').remove();
$('.diff span').first().remove(); //recommended solution by the jQuery Foundation - yet it won't work
$('.diff span').remove();
$('.diff').find('span:gt(0)').remove();
Nothing seems to remove the span. How should I do to remove it?
Try like this…
$('.diff').each(function(){
$(this).find('span').eq(0).remove();
});
The statements you have provided should work:
$(".diff").remove("span");
fiddle
I believe that the code you're talking about is generated dynamically. You need to wait until is rendered and remove the span tags after it.
You could also fix the problem in the plugin itself, or ask the author of the library to fix the issue for you.
Did you wrapp your jQuery code like:
$(document).ready(function () {
$('.diff span').remove();
});
this should work.
UPDATE:
To remove only the first child do:
$('.diff span:first-child').remove();
Fiddle
try with this$(".diff").find("span").html("");
Click here.
Somewhere I saw a rapid comment suggesting that I could use CSS to solve this - so I did. It works as a charm.
.diff span {
display: none;
}
I'm teaching myself JavaScript and I'm a little bit stuck. Here's what I'm trying to do: I have an image, and once that image is clicked it disappears and is replaced by two other images. My code works, but it replaces everything on the page instead of just swapping out the images. I think that I have to use innerHTML somehow, but when I tried that, none of the images showed up. My code is below-I'd greatly appreciate any insights or explanations-thank you!
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.write(puppy);
}
var dog = '<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';
document.write(dog);
</script>
</body>
Write out the dog div as normal html and then replace it's contents:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.getElementById("dog").innerHTML = puppy;
}
var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>
</body>
Look into document.createElement() or the whole jQuery library.
for an image swap you can just get the image (give the image you create an Id first) and then say:
document.getElementById("PetImg").src("images/puppy2.jpg");
To follow with what you're doing you could also take change puppy to do something like:
document.getElementById("dog").appendChild(puppy);
Inner HTML works like this:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
var div = document.getElementById('images');
div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
}
</script>
<div id='images'>
<img src="images/puppy.jpg">
<img src="images/puppy2.jpg">
</div>
</body>
Although there may be better ways of switching the images, if your learning Javascript stay away from jQuery as the other comments may have said its a good idea to learn these fundamentals first.
You could use jQuery... This will replace dog.jpg with puppy.jpg when the link is clicked.
<script type="text/javascript">
function showImage(){
$('#dog').attr('src', 'images/puppy.jpg');
}
</script>
<img id="dog" src="images/dog.jpg" />
You may consider picking up a Javascript framework, jQuery is popular and makes this task relatively easy. Instead of replacing all of the HTML, you can update the src attribute on the image. Something like:
$('#some_div img').attr('src', 'images/some_image.jpg');
Alternatively you can replace the html as well:
$('#some_div').html('<img src="images/some_image.jpg" />');
New to Javascript and trying my best, but can't solve the problem despite extensive searching.
Trying to make an item fadein on page load using inline script (XHTML). I'd love to use external, but can't given software restrictions. Here's the code I've developed so far...
<script type='text/javascript'>
$(document).ready(function() {
$('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;left:-200px;top:40%;width:80px;height:80px;background-color:red;'></div>
While the box does appear, it doesn't fadein so I'm assuming the Javascript isn't written correctly.
Any assistance you can provide would be greatly appreciated. Thanks.
I think for fadeIn to work the item has to be hidden first and your element position (left: -200px) is not within the viewport.
<script type='text/javascript'>
$(document).ready(function() {
$('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;top:40%;width:80px;height:80px;background-color:red;display:none'>Some content</div>
Demo: Fiddle
I would like to hide a picture in a div after 10 seconds using Javascript. The div i have is in the footer.php along with the script I researched to hide but it is not working. Any ideas?? Below is a snippet of my code.
<--footer.php-->
<div id="hide">
<img src="http://www.example.com/image.png">
</div>
<script type="text/javascript">
setTimeout(function() {
$('#hide').hide();
}, 10000);
</script>
<--footer.php-->
Do i need to have something in my stylesheet.css to reference the #hide???
Thanks in advance.
Paul
Be sure that you include jquery properly:
http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
How do I add a simple jQuery script to WordPress?
http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
use jQuery() instead of $() in wordpress environment. or you can:
jQuery(function($){
setTimeout(function() {
$('#hide').hide();},
10000);
});
and No, you dont need to have something in stylesheet that refer to the div
good luck !
You code is correct and should work if you have also included a jQuery library.
For example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I'm trying to make my header looks like this: http://wareztuga.ws/index.php and i was wondering how they managed to do that when we pass over the home bottum it flashes.
I know we need to have two images for that result but i need the funcion.
There are many approaches to implementing an image rollover. Here's a very basic approach:
<html>
<head>
<title>rollover demo</title>
<script type="text/javascript">
function swap(element, image) {
element.src = image;
}
</script>
</head>
<body>
<img src="home_normal.png" onmouseover="swap(this, 'home_rollover.png');" onmouseout="swap(this, 'home_normal.png');"/>
<img src="about_normal.png" onmouseover="swap(this, 'about_rollover.png');" onmouseout="swap(this, 'about_normal.png');"/>
</body>
</html>
A more preferable method would be to use jQuery or some other library that keeps the HTML free of JavaScript code. You'll find many, many different ways to do it if you Google "javascript image rollover" or "jquery image rollover".
this is not related to PHP. you just change the image-src ... there are many code-examples for that out there. here is one.