Is there a Javascript tutorial or code to make a subtle image hover or move in the background, like the effect on http://www.saratusar.com/?
If you wrap the img or div in an anchor tag, you can apply an effect using pure CSS. (This appears to be the technique used by the site you're referencing.)
HTML:
<a id="thing" href="javascript:void(0);"><div></div></a>
CSS:
#thing div { background: url(image.jpg); width: 100px; height: 100px; min-height: 100px; }
#thing:hover div { background: url(image2.jpg); }
If you're talking about these buttons on top, check out CSS (Cascading Style Sheet). More effects using JS and CSS you can get by using JavaScript JQuery Library.
Good luck!
Related
I've implemented lazy load images to most of my website (USING THIS https://github.com/tuupola/lazyload), however I have a shop page which is a load of thumbnails which are using the background-image tag, the code I have is as follows (it's running on smarty template system) :-
{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><span class="thumb" style="background-image: url({$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category});"></span><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}
The CSS :-
.blocks1 .block a span.thumb {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto
}
All the examples I can find rely on the background-image part being inside a div but mine is inside a span tag.
Is there a way to get this to work?
Reading online suggest span is used to style text but the original dev who wrote this seems to be using it for images?
Thanks for any help on this, I think I've tried just about everything to get this to work!!
did you try to do it with a <Div>?
W3School suggests "The <span> tag is an inline container used to mark up a part of a text, or a part of a document."
And for Div: "The <div> tag defines a division or a section in an HTML document."
I think it shouldn't make a big difference, as long as it doesn't bother your others styles?
The <span> tag is per definition an inline element used to format text. You can however turn it into a block element, so it will behave exactly like a div.
try adding this to your CSS rule:
.blocks1 .block a span.thumb {
display: block;
}
The concept is explained here: https://www.w3schools.com/html/html_blocks.asp
If your items need to be displayed next to each other and you don't want them to wrap after each item, try display: inline-block; instead.
I got this working using a different plugin (http://jquery.eisbehr.de/lazy/#about)
I added this to the CSS :-
div.lazy {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto;
display: block;
}
Changed the tpl code to : -
{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><div class="lazy" data-src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category}" /></div><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}
And I now have fully lazy loading images :)
I am using the plugin Enhanced Text Widget in WordPress to display Javascript in a sidebar widget. The script runs and displays the info, but the content overflows outside the widget area. I want to keep the content within the confines of the widget area and I've tried a few different CSS options and nothing is working to contain it.
Site is: http://dev.northwestfiretraining.com/ and its on the left sidebar under DAILY BURN INFO.
Thanks!
Your css needs to be tweaked.
The .burn class is too wide, with a width set fixed to 320px, instead of dynamic based on the width of the container div (.textwidget):
.burn {
width: 320px;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
Try changing it to this:
.burn {
width: 100%;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
.burn
{
width: auto !important;
}
Add this code in your style.
I would like to use anchor tags to scroll within a div on the webpage. However, when I click on the anchor tag, the entire page jumps to the anchor tag within the div.
The content within the div should scroll, without the body of the webpage autoscrolling.
I've been googling and trying to figure this out for weeks & have not yet found an acceptable solution. It seems to be a really commonly asked question, too.
I know very little about javascript, but from what I gather there seem to be two possible ways of accomplishing this:
1. To make the body of the page scrollable only by mousewheel/manually and not with anchor tags. This would apply to the body only and not other elements.
-or-
2. To scroll to the anchor tag within the div, and cancel the process before it affects the body.
A bonus would be if it did not add the anchor tag to the url.
Here are some additional links to similar questions, may have some ideas you could work with:
seems promising, could not get it to work
Scrolling within a div without moving page
uses event.preventDetfault() or event.returnValue = false
may work for body after anchor link scroll to right
http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/
other ideas for similar problems
How to prevent page scrolling when scrolling a DIV element?
How to go to anchor tag in scrollable div without having the whole browser jump down?
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
other approaches to similar question
HTML anchor link with no scroll or jump
Here is a sample HTML and CSS with the relevant elements. You may resize the browser window so that there is a scrollbar for the main page to see the undesirable autoscroll effect:
<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
2
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>
Here is the CSS
html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}
Maybe you can gain some points for definitively answering this commonly asked question?
You can use the scrollTop function from Jquery to position the scrollable div exactly how you want it.
$( "#viv_button" ).click(function() {
var container = document.getElementById('col2');
var scrollTo = document.getElementById('viv');
container.scrollTop = scrollTo.offsetTop;
});
Here is a fiddle of it working
I used anchor tags to locate it, but you can use anything with an ID.
I found this occurred because there was a parent of the element within which you have your href='#id_of_element'.
To fix this....
// javascript
document.body.position = 'absolute';
// or css
.body {
position: absolute;
}
You could use fixed, or relative. But this stops the body ( main page ) from scrolling on selection of href somewhere within a child element.
Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.
I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.