I'm building a product configurator.
I need 2 images to overlap. Imagine a stove, where the stove itself is one image, and the knobs / handles another.
Both images are the same size, so they should overlap "fully".
Both images are inside a div and based on a function that returns a div.append(Child) if that matters.
I have tried every way I found online, doing what I think is right but it obviously doesnt work. If I call 1 div then the other (img1img2), they dont overlap. If I call the second image inside the first div, it doesnt show.
What am I doing wrong?!
html:
<input type="button" onclick="create_img(); " value="Create image" />
<div class="imageWrapper">
<div id="pop" >
<div id="pop2" >
</div>
</div>
</div>
JS:
function create_img(){
var im=""
var div = document.getElementById("pop");
var hold= document.createElement("img");
if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}
hold.src=im;
hold.border=0;
div.appendChild(hold);
var im2=""
var div = document.getElementById("pop2");
var hold= document.createElement("img");
if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}
hold.src=im2;
hold.border=0;
div.appendChild(hold);
}
CSS:
.imageWrapper{
position: relative;
top:0;
left:0;
width:160px;
}
#pop {
background:transparent;
}
#pop2 {
position: absolute;
left:0;
top: -150px;
background:transparent;
}
i have tried so many ways, not sure what to do next!!
Thank you!
If you just need to stack 2 images, then you should be able to do this using a single <IMG/> tag. Set the CSS background-image of the <IMG/> tag to be the picture of the stove. Then set the src attribute of the <IMG/> tag to be the knobs.
so, following David's advice and doing more research on the proper syntax, this is what I came up with.
the function creates both images (im amd im2) according to parameters as listed, then one is defined as the bg image, and the other as the src image.
so it looks like i dont really need css for this particular issue.
Thanks again, David! saved me a lot of time, headaches and money by having someone else design that for me!
function create_img(){
var im=""
var div = document.getElementById("pop");
var hold= document.createElement("img");
if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12" ){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;}
else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13" ){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;}
else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}
var im2=""
var div = document.getElementById("pop");
var hold= document.createElement("img");
if (document.Lacanche_Configurator.Finishes.value=="1" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;}
else if (document.Lacanche_Configurator.Finishes.value=="2" ){im2= "http://www.french-barn.com/configurator/img_front/cormatin/nickel.png" ;}
else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";}
hold.src=im2;
hold.border=0;
div.appendChild(hold);
div.style.backgroundImage = 'url("'+im+'")';
}
Related
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
I'm quite new in coding, trying to educate myself because i'm interested. So, sorry if it's going to be a bit dumb question or not so specific or not really correct...
On my "practicing site" i'm having some navigation links, which are referring to different innerHTML contents (like different pages). I used the 'onClick' event to make them show up, for example like this:
<div class="nav" onClick="changeNavigation('a')">menu</div>
It works with texts perfectly, but my problem is that i don't know how to make the same with an image. So when i click on the image, i want to be redirected to that innerHTML page, like i did it with the text based button. I tried to do it like these two ways, but none of them worked.
<img src="picture.png" onClick="changeNavigation('a')" />
<div onClick="changeNavigation('a')"><img src="picture.png"></div>
Is it possible to make this with an image and the 'onClick' event? Or how else can i make this work?
By the way this is my script to make innerHTML show up:
<script>
function changeNavigation(id) {
document.getElementById('main').innerHTML = document.getElementById(id).innerHTML
}
</script>
I also tried to add my image an id that says 'main' like in the script this way, but with no result.
<img id="main" onClick="changeNavigation('f')" src="picture.png" />
Can you help me please? I would appreciate any answer, because i already searched about this and i didn't find anything that could've helped solve my problem and i'm really stuck right now.
(Sorry if my english isn't the best, it's not my native language.)
I have updated my answer to what you want. You need to the divs id you want to display as a parameter to the function you use for onclick. A sample is below.
var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
img {cursor:pointer}
<div class="main_div">
<div class="buttons">
<img src="http://www.clker.com/cliparts/J/g/2/D/p/I/one-hi.png" width="50px" onclick="toggleVisibility('Menu1');"> <img src="http://www.clker.com/cliparts/E/x/J/x/m/z/blue-number-two-hi.png" width="50px" onclick="toggleVisibility('Menu2');">
<img src="http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png" width="50px" onclick="toggleVisibility('Menu3');">
<img src="http://www.clker.com/cliparts/v/G/G/A/D/s/four-md.png" width="50px" onclick="toggleVisibility('Menu4');">
</div>
<div class="inner_div">
<div id="Menu1">I'm container one</div>
<div id="Menu2" style="display: none;">I'm container two</div>
<div id="Menu3" style="display: none;">I'm container three</div>
<div id="Menu4" style="display: none;">I'm container four</div>
</div>
</div>
You can just keep all of the sections as children of #main, and selectively show them when the section button in clicked. E.g.,
HTML
<nav>
<button type="button" data-index=0>Show one</button>
<button type="button" data-index=1>Show two</button>
<button type="button" data-index=2>Show three</button>
</nav>
<main id="main">
<section>One</section>
<section class="hidden">Two</section>
<section class="hidden">Three</section>
</main>
CSS
.hidden {
display: none;
}
JavaScript
const buttons = Array.from(document.querySelectorAll('button'));
const contentBlocks = Array.from(document.querySelectorAll('section'));
function hideSections (arr) {
arr.forEach(a => {
a.classList.add('hidden');
});
}
function showSection (index, sections) {
// Just a basic check, not exhaustive by any stretch
if (index !== undefined && sections !== undefined) {
hideSections(sections);
sections[index].classList.remove('hidden');
}
}
buttons.forEach(button => {
button.addEventListener('click', () => {
const contentBlocks = Array.from(document.querySelectorAll('section'));
const index = button.getAttribute('data-index');
showSection(index, contentBlocks);
});
});
Obviously you'll have to adjust your selectors for your use case, but Here's a pen
Here's a GitHub Gist pointing to some examples I created on JSFiddle based off of your specific use case (Stack Overflow doesn't let me post links to JSFiddle directly without including code here, but it's easier to follow along/experiment entirely in JSFiddle):
https://gist.github.com/andresn/f100386f06ee28e35bd83c62d9219890
More advanced stuff:
Ideally, you'd use what's called event delegation instead of adding an onclick to every anchor (DRY = Don't Repeat Yourself is good to always keep in mind while programming and so is KISS = Keep It Simple Silly). Here is a resource explaining event delegation:
https://davidwalsh.name/event-delegate
You can even take this further by preloading all your images so they load behind the scenes when the user first loads the page:
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
So I have this:
clicking here
<a name="link">goes here</a>
Simple, but the problem is that my site has a fixed position header that stays at the top of the page, so when a user clicks on the link, the place I want them to go to is hidden by the header. So I guess where I really want them to end up a certain amount of pixels above what I actually want them to see. I've tried putting the destination link above where I want them to end up, but it's a block of text so it changes with different screen sizes and therefore isn't consistent.
I'm wondering if there is any way to solve this problem, perhaps something with css.
Thanks in advance.
I realise this is over a year old, but for the benefit of anyone else who comes across it:
A slightly simpler solution is to put padding at the top of the section you are targeting with the link.
HTML:
<section id="section_name">
...Your stuff here...
</section>
CSS:
#section_name {
padding-top: 40px;
}
You could use a jQuery method so that when a link with a # is clicked, it finds the position of the element it's meant to go to and then moves to a position X number of pixels above the target.
Something like this:
$(function(){
var positionOffset = 50;
$('a[href=*"#"]').click(function(){
var targetHash = this.hash;
if(targetHash.length > 0 && targetHash == window.location.hash){
var elementPosition;
if($(targetHash).length){
elementPosition = $(targetHash).offset();
} else {
var targetAnchor = targetHash.replace("#", "");
elementPosition = $('a[name="' + targetAnchor + '"]').position();
}
$(window).scrollTop(elementPosition.top - positionOffset);
return false;
} else {
return true;
}
});
});
I'm looking for a way so that when I hover over an image, the title or alt tag is displayed in the center of the image (fading in/out), with the image also lowered in opacity.
I've looked around quite a bit but most javascript plugins I find create a tool tip and it's not what I'm looking for.
Thanks for any suggestions.
EDIT: Forgot to mention, the images need to stay in a simple ul list, no extra divs or anything wrapping around each image. They will also use the rel attr for shadowbox or similar.
You could do something like this
$('ul li img').hover(
function(){
$(this).css('opacity','.5');
var a = $(this).attr('alt');
$(this).parent().append('<div class="title">' + a + '</div>');
},
function(){
$(this).css('opacity','1');
$(this).next().remove('.title');
}
);
(Quick and dirty jQuery could definitely be improved)
CSS
ul li img{
position:relative;
}
.title{
position:absolute;
z-index:1000;
top:50%;
bottom:50%;
right:50%;
left:50%;
width:100px;
border-radius:5px;
background:red;
}
(CSS could also be improved... but this gives you an idea)
Example: http://jsfiddle.net/dgKne/
This is just a general description of how you can approach in solving this problem using jQuery:
1) Put an image in a div and give this div class (example: altHover)
2) On hover, first pick alt tag and store it in variable: var title = $("em").attr("title");
3) in the same hover function, make new div inside hovered div and print alt tag inside it:
$(".altHover").hover(
function () {
$(this).append($("<div class='altText'>" + title +"</div>"));
},
function () {
$(this).find(".altText").remove();
}
);
You could use what ile has, but instead of adding a div, you could use addClass. Just use li as the hoverable object.
$("li.picture").hover(
function(){
$(".selected_result").removeClass("selected_result");
$(this).addClass("selected_result");
}
);
I am not a pro javascript person, but this would give you an idea.
I tried to display a image when a mouseover on text occurs. It works fine. And the alignment of the image should be shown such that the end of the image should be at the container. It works fine with the code shown below, Only in IE7. In everything, it gets chopped off.. What is wrong here?
<td valign="middle" class="table_td td" style="width: 347px">
<span class="feature_text" style="cursor:pointer"
onmouseover="ShowPicture('Style16',1)"
onmouseout="ShowPicture('Style16',0)" id="a16">
Storefront Window Decal</span>
<div id="Style16" style="position:relative;height:0px;left:50%;bottom:700%;
visibility:hidden; border:solid 0px #CCC; padding:5px">
<img src="images/window-decal-image.gif"></div>
<script language="javascript" type="text/javascript">
function ShowPicture(id,Source)
{
var vis, elem;
if (1 == Source)
{
vis = "visible";
}
else if (0 == Source)
{
vis = "hidden";
}
else
{
throw new RangeError("Unknown Flag");
}
if (elem = document.getElementById(id))
{
elem.style.visibility = vis;
}
else
{
throw new TypeError("Element with id '"+id+"' does not exist.");
}
return vis;
}
</script>
Can someone help me out. Thanks in advance!!
I'd suggest using background-image on your div instead of a separate <img> tag, and background-position:right; to align it as per your requirements.
You may need a few other related bits of CSS to get it perfect (background-repeat maybe?), but I'd suggest that's the way to do it.
I'd also suggest moving all that style code into a separate CSS <style> element to reduce the clutter in your HTML code and make it more readable.