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
Related
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.
I have an issue with scrollspy, recreated in this fiddle:
http://jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.
The next step would be to remove the fixed content height and use 'affix' on the sidebar.
I had the exact same problem and for me, adding height: 100% to the body element was the fix.
(stricly nothing else seemed to make it work)
You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:
$('#content').scrollspy();
JSFiddle
FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
(It just auto-selected the my last element always)
In my case, Firefox was always selecting the last element and it was NOT the
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
It was a
position:absolute;
on a container div.
Hope it helps someone out there...
I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
https://github.com/twbs/bootstrap/issues/5007
When calling the scrollspy method you typically specify the body tag and the nav element.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.
If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.
I had this same problem; removing the height: 100% from the <body> element fixed this for me.
I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.
ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
Nested content was my problem. This fixed it for me:
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(2) If the items in your spied upon content container are nested then it won't work...
This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.
Make sure you're not mixing implementations. You don't need $('#content).scrollspy() if you have data-spy="scroll" data-target=".bs-docs-sidebar" on your body tag.
I think that this might be a bug in ScrollSpy.
I also had the same problem and when I stepped through the code I could see that the offset for all the targets were the same (-95px). I checked where these were being set and it was using the position() function. This returns the position of the element relative to the offset of the parent.
I changed this to use the offset() function instead. This function returns the position of the element relative to the offset of the page. Once I did this then it worked perfectly. Not sure why this isn't the default behaviour.
The reason that the position() function wasn't working in my case was because I had to have an empty div which was actually absolutely positioned 95px above the top of its container. I needed this as my target so that the headings weren't hidden behind my header that was fixed to the top of the page.
When I was trying to figure out this issue, I used some of what Mehdi Benadda said and added position: relative; to the body. I added this to the stylesheet:
body {
position: relative;
height: 100%;
}
Hopefully this helps someone in the future.
You don't have to call method scrollspy().
Also you don't need set height: 100% anywhere.
All you need is:
position: relative; for body
add data-bs-spy="scroll" to your content or body
add data-bs-target with navbar id
https://i.imgur.com/M5jib0t.png
It helps me.
It seems that scroll spy work only when used container has a scrollbar (Tested with bootstrap 5).
You can put data-bs-spy="scroll" and data-bs-target="#target-nav" attributes in the nearest parent having a scrollbar.
In my case, i had added the scrollspy component of bootstrap version 5.2.3 but my bootstrap js cdn was 5.0. After i added the 5.2.3 js cdn, it worked!
You may also add the downladed bootstrap js files as well.
And make sure to add the bootstrap css cdn too!
I was watching a Video tutorial according to the author CODE #2 should be used, but instead I changed it a little bit to CODE #1
So whats the difference in both of codes ,both perform the same tasks ,any technical or good practice here ?
CODE #1:
Used eventhandlers MouseOver and MouseOutof of tag
<a href="http://www.google.com" >
<img alt="arrow" name="ArrowImage"
onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
src="Images/arrow_off.gif" />
</a>
CODE #2:
Used eventhandlers MouseOver and MouseOut of tag
<a href="http://www.google.com"
onmouseover="document.arrow.src='images/arrow_on.gif'"
onmouseout="document.arrow.src='images/arrow_off.gif'">
<img src="images/arrow_off.gif" width="147" height="82"
name="arrow" alt="arrow" />
</a>
If there's no formatting or additional content inside <a>, you can use either and it won't make a difference.
If there is CSS formatting or additional content within the link, the boundary of the <a> might differ from the boundary of the img. In this case it depends on the actual intent: Do you want to change the image source only when hovering the image or also when hovering the remainder of the link.
But since you're asking for good practice: It is recommended to not use inline JavaScript, i.e. don't mix HTML and JavaScript. When applying good practice you'd probably catch the mouse events in a separate <script> at the bottom of your HTML document or define a style using the CSS :hover pseudo class.
In the first example, the onmouseover and onmouseout events are bound to the <img> tag, so mousing inside the <img> activates them. In the second example, they're bound to the <a> tag in which the <img> is contained.
For your two examples, the result will be identical because the <img> is the only element inside the <a> tag.
However, if more text was included inside the <a> tag and the events bound to the <img> only, the rollover effect wouldn't occur when mousing over the text.
For example:
<a href="http://www.google.com" >
This is some text explaining the image. If you mouse over it, the rollover won't change.
<img alt="arrow" name="ArrowImage"
onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
src="Images/arrow_off.gif" />
</a>
<a href="http://www.google.com"
onmouseover="document.arrow.src='images/arrow_on.gif'"
onmouseout="document.arrow.src='images/arrow_off.gif'">
This is some text explaining the image. If you mouse over it, the rollover WILL change.
<img src="images/arrow_off.gif" width="147" height="82"
name="arrow" alt="arrow" />
</a>
Either works fine. It's a matter of what you want to do.
If for instance you had text as well, you'd choose option 2, because the text would be right after <img> and before </a>.
Generally, you want stay away from binding directly to images, because you usually end up wanting to put more things with that image (such as text, or other containers).
It's generally not considered good practice to use 'inline javascript' the way you're doing here. This makes code very difficult to read and and less maintainable in the long run. Using unobtrusive javascript defined in a separate javascript file is the way to go. An example of that using jquery would be:
// defined in application.js for example:
$("img").hover(function onmouseover(){
$(this).attr("src", "Images/arrow_on.gif");
}, function onomouseout(){
$(this).attr("src", "Images/arrow_off.gif");
});
As far as the differences between the two approaches, the only difference is at what point the events get triggered. The first one causes the events to be triggered when the user mouses over the image, and the second one occurs when the user mouses over the anchor. The anchor, depending on it styles, could occupy a larger area than the image itself, so choosing between the two depends on the effect you want to produce.
As far as 'good practices', this example is really a bad usage of javascript, in other words you can accomplish the same thing using CSS Sprites.
For example, CSS:
/* use a more specific selector in your actual code */
a {
/* on state */
background: url(Images/arrow.gif) no-repeat 0 0;
}
a:hover {
/* default state */
background: url(Images/arrow.gif) no-repeat -50px 0;
}
Was the video from 1992?
You can achieve rollover effects with CSS alone, which is considerably better, e.g.
a#rollover {
background: url("normal.jpg") no-repeat 0 0;
}
a#rollover:hover {
background: url("rollover.jpg") no-repeat 0 0;
}
Better still, you can have both states as a single image, and just change the background position on hover, as described here.
If you want to use JavaScript to change an image source, then a) use unobtrusive JavaScript, and b) use jQuery for added simplicity.
First, roll over images are typically accomplished with CSS
See devdigital's answer for an example.
Second, if you are going to use JavaScript in the way you have in your code see Michael's example
Third, I would like to note that the attribute "name" is not a valid attribute for either of those elements in HTML5 and not at all (Read: HTML4) for the img element.
Finally, a preferred way to do this with with JS would be something like this:
HTML:
<a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a>
JS:
var atag = document.getElementById('rollover');
atag.onmouseover = function() {
document.getElementById('rolloverimage').src = 'rollover.jpg';
}
atag.onmouseout = function() {
document.getElementById('rolloverimage').src = 'image.jpg';
}
I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!
Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">
I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.
I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).
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.