Guessing this will be a real easy fix for someone with the know-how. I am still learning JavaScript and I'm always trying to learn more.
I currently have the following code:
<script type="text/javascript">
$(window).load(function() {
$("#background").fullBg();
});
</script>
This works fine. at the moment #background is:
<img src="images/background.jpg" alt="" id="background" />
However I want to be able to put the background in as a div background and not just an image.
How do I change the script above so that the function applies to the background-image of a div which will be set in CSS instead of pointing to the img tag as it currently does?
I have tried to search the internet for a solution; however I am not good enough at JS yet to word my search correctly to find what I am looking for.
Thanks in advance and sorry if my description is poor.
If I understood correctly, you're trying to assign a css property to the DIV.
Then you should use .css('propertyName', 'value').
You can find the documentation at jQuery .css()
.css() is what you're looking for (this example uses jQuery)
<script type="text/javascript">
$(window).load(function() {
$("#background").css({
"background-image" : "url(images/background.jpg);",
});
});
</script>
The plugin you are using (fullBg) was designed to work with img elements, not background images. Why do you even need a div? If you style the img with CSS as the plugin docs suggests, the outcome will be the same.
Related
I am struggling to find a working way to achive my goal here, so after hours of research I am trying to ask you here. Also I am still a beginner in Javascript / Css matters.
Situation:
I am having a html webpage which contains a div. This div has a background-image set through css, like this:
style="background-image: url("Media/tux.svg"); background-repeat: no-repeat; background-size: contain;"
What I need to do now in my Javascript code is to modify the color ("fill") of some of the paths inside this image, so that I can see these changes on the image on the webpage.
I have found a way to grab the contents of the image by doing something like this:
var mySvg;
$.get("Media/tux.svg", function (data) {
mySvg = data;
}, 'xml')
After this, "mySvg" contains a huge -tag with the contents of my image. I am then able to find one certain path and modify its "fill" attribute by doing the following:
$(mySvg).find("#path3205:first").css("fill", "#FFFFFF");
But the problem now is, how do i get this variable back to my "background-image" css property?
There are some ways mentioned on stackoverflow / google which i have tried. The latest i tried was taken from this jsfiddle file. Here i took the "url" part and tried to apply it to my div, but still i dont see any changes on my background image.
https://jsfiddle.net/estelle/SJjJb/
If you know a working way to do this, it would be great. Thank you very much.
If you need further information, please let me know.
Best regards.
I'm really new to all of this so if anybody can help much appreciated - I have 2 questions.
First I tried:
<a href="Streaming.html">
<li>
<img Src="Streaming.jpg" onmouseover="this.src='HoverStreaming.jpg'; this.height='90px';"; onmouseout="this.src='Streaming.jpg'; this.height='75px';"; width="140" height="75">
</li>
</a>
This worked for changing the image but doesn't seem to work for the height.
Since it's in a list and div is block level I am not using it however I tried putting an ID on the image and using JQuery connecting my html to my other file using <script type="text/javascript" src="ArchDragonJQuery.js"></script> and using:
$(document).ready(function(){
$("#Bigger").mouseenter(function(){
$(this).animate({
height: "+=30px"
});
});
$("#Bigger").mouseleave(function(){
$(this).animate({
height: "-=30px"
});
});
});
I have tried a few things instead of ID and I still cannot seem to get it to do anything.
So I am wondering A- how can I make the size increase while hovering over, and B- is my jQuery code simply not being correctly linked to the html? if so how do I fix this?
Thanks
From what I can tell, you want an image to have a height of 75px and, when it is hovered over, you want the image to change and have a height of 90px. You can accomplish the 'growing' effect using only CSS using the hover selector.
.hoverGrow img {height:75px; transition:height .4s ease;}
.hoverGrow img:hover {height:90px;}
<a href="Streaming.html">
<li class="hoverGrow">
<img src="http://placekitten.com/g/200/300" onmouseover="this.src='http://placekitten.com/g/300/200';"; onmouseout="this.src='http://placekitten.com/g/200/300';">
</li>
</a>
this.height is always the height in pixels. It's a number without units. You'd want to do this.height=75. That'll change the height attribute on the element itself. (I think you could probably do this all without script and use CSS only, you can see an example here and here).
I'm not sure what's wrong with your jQuery case. Make sure the ID has the same capitalization - you have an unusual capitalization style going on in your example. IDs are case sensitive in most browsers. $("#Bigger") will match <img id="Bigger"> but not <img id="bigger">. You also can't have multiple elements with the same ID - make sure there is only one id="Bigger".
I redid your code and it all works out. Hopefully you can learn just by looking at what I did. Your a tag needs to be inside your li tag. Your Src needs to be src. keep the code clean. I know I am typing like shit but I am lazy now :D Click the link to the codepen
Hope this helps.
$('img.image').mouseenter(function(){
$(this).animate({height: '+=30'});
});
$('img.image').mouseleave(function(){
$(this).animate({height: "-=30"});
});
http://codepen.io/anon/pen/VYLezx
In my current web project Im trying to change the scrollbar with a lib called jScrollPane.
The script applies and generates the jspContainer, but the div jspVerticalBar ist missing. First I thought the script got problems when its loaded in with .load. But I placed the script tag in the view.html that is getting loaded in.
Another problem is when I go to another view and return to the front page, the script generates a wrong width of the container. Is is so small that the content of the container gets invisible by the overflow:hidden.
Does anyone got an idea why this happens? Did I do something wrong? Can you please help me out with this?
Here are all informations you may need:
#import url("sbar.css"); /*in main.css*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/vendor/mwheel.js"></script>
<script src="js/vendor/jscrollpane.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function() {
$(".scroll-pane").jScrollPane(); // in startseite.html
});
</script>
The live example: Link
I know I am too late to reply, but just thought that other people like me, who came here just to find the answer to the question, might get some help
Checkpoints:
the container must have a fixed width (or at least a maximum width)
the container must have a fixed height (in pixel, e.g., 200px, 250px)
the container must have overflow:auto; (or at least overflow-x:hidden;overflow-y:auto;)
a regular scrollbar must appear without applying jScrollPane
Important
In case you still cannot fix the issue, then here is one additional checkpoint:
? Are you adding contents dynamically to your container on which jScrollPane is applied?
If the answer to above question is yes, then please consider the reinitialise() api of jScrollPane and use it after dynamically adding the content.
The above mentioned api is very useful for a SPA
For more information and example, please visit:
http://jscrollpane.kelvinluck.com/dynamic_content.html
Apologies if this question has already been asked, but I'm struggling to find an answer on SO.
I'm using jQuery jScrollPane on a div. I can tell the plugin has been linked correctly as the standard browser scroll bar is removed, but no jScrollPane scrollbar is added in replacement, I just can't scroll down the content..
My markup is as simple as:
<div class="classa">
...Long content here...
</div>
Javascript:
$(document).ready(function(){
$(".classa").jScrollPane();
});
Has anyone experienced this before? Is there something simple I'm missing?
I think I might be missing some CSS somewhere or something, otherwise I don't know how to specify the colour of the scrollbar anyway...
Your help would be much appreciated
There is some sample CSS code for the jScrollPane example at this URL: http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html.
The sample CSS can be found at:
http://www.kelvinluck.com/assets/jquery/jScrollPane/styles/jScrollPane.css
Hope that helps.
My mistake - that CSS is to be used with an older version of jScrollPane. The correct CSS to use can be found here: http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css
try enclosing the ".... long content here....." in the tag.
like so:
<div class="classa">
<p>
...Long content here...
</p>
</div>
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.