Issue displaying images inline - javascript

I am trying to display a number of images on the same line without wrapping down. I have tried just about everything I know to make this work with no luck! I am trying to make an image selector for a slideshow that will be loaded into the page with ajax / jQuery and I don't want it to take up a ton of screen realestate. Ideally I want to be able to scroll horizontally and select my images.
<script type="text/javascript">
$(document).ready(function () {
test();
});
function test(){
for (var i=0; i < images.length; i++) {
$("#test").append("<img src='"+images[i]+"' style='width:250px; height: 250px; margin:10px; display:inline'/>");
};
}
</script>
<div id="test"></div>
Usually I have 0 issues with HTML so I feel kind of silly for asking and I'm sure it's a very simple mistake I am making. Any help would be greatly appreciated!

Try applying nowrap to div#test:
#test{ white-space:nowrap; }
You may also need another wrapper around div#test with overflow:auto; then if you want the horizontal scroll.

Try float:left in the images or try to wrap the images in a div and then try float:left

Try float:left in the <img> tags style. If it doesn't help, try changing display:inline to display:inline-block.

try float:left on images
and I see that you haven't declared the images array(hope you have in your original code)

Related

How can I expand images on hover with canvas?

I really like in this example http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/ how the images expand on hover. I know how I could do this with jquery but I also know it wouldn't be as fast and reliable. I could give it a try with d3js but I am really new to it, any idea where I could start or other viable alternatives?
thanks
Try this:
html:
<div style = "display:inline;" id = "imgBar">
</div>
css:
#imgBar{
//CSS here
}
#imgBar > img:hover{
width:200px; //Just set the width to double it's default value
height:200px; //Same as above; 200px is just a dummy value
}
Then, you can add images to the div with javascript.
Good Luck!

How to make the div fixed on scroll in Skrollr code?

I want the SVG DIV to remain fixed on scroll. CSS didn't help. It ruins the code. Please answer.
If I use
display:fixed; in CSS, then the whole scrolling javascript doesn't work.
Here's the jsfiddle: http://jsfiddle.net/tashfene/58zNp/1/
Please help!
Use position:fixed not display:fixed
I added it to your code inline: http://jsfiddle.net/58zNp/2/
This is easy to do
you should add an css code to your H1
h1{
position:fixed;
}
DEMO
Use position:fixed instead of display:fixed

Nivo Slider Thumbnail / ControlNav not positioning inside slider

This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!

An impressive responsive javascript effect. How to do it?

recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:
http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.
As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!
This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/
I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)
The More Content part, could be implemented by pure css, without any javascript. with this structure;
<div class="thumb">
<div class="img"></div>
<div class="content"></div>
</div>
and have this css present;
.thumb{
display:block;
width:100px;
height:100px;
}
.thumb div{
position:absolute;
width:inherit;
height:inherit;
}
.thumb div.content{
opacity:0;
}
.thumb:hover div.content{
opacity:1;
}
or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.
Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/
At least thats how i would do it. Let me know if you want me to elaborate
Some example code:
$(function(){
$('.thumbnail').click(function(){
var $this = $(this);
var $divToShow = $this.nextUntil('div.container');
//fetch the divs content via ajax or however u want to do it here...
$divToShow.stop(true, true).slideToggle();
});
});
I would try http://api.jquery.com/slideDown/ for the very basics...
after that... it's just a mix of imagination and good taste :)
There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide
If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.

Need to add stable HTML & CSS into jquery "ContentFlow"

I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.

Categories