how to prevent image wrap in responsive mode - javascript

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit

If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/

Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Related

How can I integrate srcset in slideshow?

My website contains a slideshow. I want to change the image, depending on the viewport size. This has been solved with following code:
<picture>
<source media="(min-width:650px)" srcset="images/slider/4.gif" >
<source media="(min-width:200px)" srcset="images/slider/4_m.gif" >
<img src="images/slider/4.gif" alt="" style="width:auto;" >
</picture>
The image works, dependently on the viewport size. My problem - I want to integrate in this code here:
<div class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
'Following line should be replaced with code above...
<img src="images/slider/4.jpg" alt="" title="#slider-direction-1" />
<img src="images/slider/5.jpg" alt="" title="#slider-direction-2" />
<img src="images/slider/6.jpg" alt="" title="#slider-direction-3" />
</div>
4th line should be replace by code above, but it doesn't work out. Can someone help?
Thanks in advance!!

Auto resize images in container Bootstrap [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm actually coding a web page in HTML5/CSS3/JS. It's composed with images that are clickable with different effects (modals, hover, etc ..). I'd like to positions elements with precision in a container (in order to make the composition easyly usable) and not directly in the page. An arrow have to be centered in the box and different buttons have to be placed in different areas. (cf. image)
What is the best way to do that ? With relative or absolute positionning ? Will it be absolute comparatively to the container ?
How to make the content of the container responsive (in order to keep the proportions of the composition). Can I use Boostrap containers for that ?
This is a screenshot of what i what to do (an image for buttons and an image for the arrow) :
Thanks a lot for your help :)
Expanding on my comment here's one way you could do it(with the first two dots positioned):
.container {
position:relative;
}
img.point {
position:absolute;
}
img.point.one {
bottom:103px;
left:57px;
}
img.point.two {
bottom:21px;
left:57px;
}
<div class="container">
<!-- <img class="final" src="https://s31.postimg.org/70gvh473f/final.jpg" /> -->
<img src="https://s31.postimg.org/g5p8azai3/arrow.jpg" />
<img class="point one" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point two" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point three" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point four" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point five" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point six" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point seven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point eight" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point nine" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point ten" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point eleven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
<img class="point twelve" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" />
</div>
As far as responsiveness goes, you would just have to change the size of the dot images as well as the bottom/left values at each breakpoint. The easiest way to position the dots is to have the final image positioned within the container and then using the inspector to position the dots over the final image.
<span style="position:absolute;left:-50;top:-5;font-size:1px;width:250;height:10px;"> your code </span>
position: Absolute should be used more often. It is actually kind of counter intuitive of absolute and relative if you look up on CSS
position: Absolute helps you define the precise position related to the previous element, which is what you will be using for arrangement of lots elements .
Use variables instead of fix numbers to keep the elements spacing in a constant ratio.

Can I call multiple tracking pixels with an image pixel?

Can I call mutiple tracking pixels with an image pixel?
My main tracking pixel would be -->
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
However, if I do mod_rewrite, could I also call the other pixels in the phph file?
Basically, I can place only one tracking pixel, but would need to call all the pixels from below.
<img src="http://domain.com/pixel/123" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain1.com/pixel/232" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain2.com/pixel/745" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain3.com/pixel/478" alt="" style="height:1px;width:1px;border:0 none" />
<img src="http://domain4.com/pixel/894" alt="" style="height:1px;width:1px;border:0 none" />
Also, for the task, I can' use server to server tracking or iframe tracking. So I would need a way to load the pixels from above in one file.
You're loading 5 different resources (tracking pixels) from 5 different domains, so you need the client to do the 5 requests: no server-side stuff will work (server will only have HTTP headers for "domain.com", and no for "domain*.com").
You may use CSS with 5 background image layers:
external, loaded through <link rel="stylesheet" type="text/css" href="..."/>
internal with <style>...</style>
inside a style attribute)
Example with style attribute:
<div style="background-image: url('http://domain.com/pixel/123'), url('http://domain1.com/pixel/232'), url('http://domain2.com/pixel/745'), url('http://domain3.com/pixel/478'), url('http://domain4.com/pixel/894');">&#xnbsp;</div>
If CSS is not enabled, tracking won't work.
You can put the style attribute on an existing element.
There is no other way apart (edit in case I've forget some):
Multiple <img.../> tags
CSS background-image: url()...;
Multiple <iframe...></iframe>
Multiple <link.../> (then "tracking pixels" become "tracking CSS/external resource")
Javascript loading (XMLHttpRequest or others ways to load resources)

Multiple Roll Over Images

Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />
Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.

Image swap onclick within div

I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html
My thought is that I need to apply the "display" ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?
Thank You.
I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7's prop method here which you should be using instead of attr.
http://jsfiddle.net/txbqX/3/
jQuery to get what you want
//when main image is clicked, show it in colorbox
$('#foo a').colorbox();
//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
$('#foo a').prop('href', $(this).prop('src'));
$('#foo img').prop('src', $(this).prop('src'));
return false; //stop link from navigating
})
Simplified HTML
<div id="foo" >
<a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" />
</a>
</div>
<br />
<div id="thumbs">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>

Categories