I have an HTML structure with a mosaic of image : 4 images per row.
When I click on an image, I would like to make a full-width div appears below the row where the image is.
And I need to have that element (.div-full-with) to remain in flow.
Here is a schema :
I’ve tried absolute positioning but the element is not in flow of course.
.div-full-with {
background-color: #333;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px;
}
I’ve tried some other technics (calculate, etc) but I can’t achieve this.
If the structure was static, it would be very easy. But I'm in a loop and I have to make it in a template like this where there is only only one element :
<div class="col-md-3">
<img src="..."/>
<div class="hidden-div">some content in full width</div>
</div>
Related
The title may be a little bit unclear, but I have an <img> tag generated by the WordPress shortcode: the_post_thumbnail('thumbnail'); and I placed this inside a parent div, to give it the right place in the website.
single.php has this inside:
<div class="newsidebar">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
HTML output:
css styling for .newsidebar
.newsidebar {
width: 30%;
position: relative;
left: 100%;
transform: translateX(-100%);
height: 500px;
margin: 4em 0;
}
expected output is just this image sitting inside my .newsidebar div, but actually it's stuck at the bottom of the page for no reason. There is no padding/margin pushing the img down, no position absolute with top/bottom styling.
Is there another css reason that I overlook why it wishes to sit ~1000px lower in the site then expected?
actual output on site:
What did I try to fix this?
giving the img:
positions,
margin,
top,
bottom,
but the only thing that actually got it to stay inside the parent was
.newsidebar > img {
position: absolute;
top:0;
left:0;
}
downside of this code, I don't want to use position absolute, as there are widgets/ other elements being added inside newsidebar. which will then hover above or below this image.
any CSS/JavaScript/jQuery solutions are helpful.
edit I fixed my issue using another WordPress function named get_the_post_thumbnail_url() and adding that url to the background of a div inside my .newsidebar div. but I am still curious to find out why this <img> was taking a trip down my website.
I'm using slimbox to create a pop-up image option.
Everything works as expected but I want to add a "restriction" to the max size of an image after it's been poped-up.
I now have an image with a width of 3572px. I have no control over the image size my clients upload to the website so I need to set a max width for them.
I have looked at the css that create the box but I can't find a way to add a max-width element to any class or id.
Here is the output of the page if an image is clicked:
<div id="lbOverlay" style="visibility: visible; opacity: 0.8;"></div>
<div id="lbCenter" class="" style="top: 0px; width: 3572px; height: 2164px; margin-left: -1786px; left: 840px;">
<div id="lbImage" style="visibility: visible; opacity: 1; background-image: url("http://www.xxx.nl/large-image.jpg");"></div>
<div style="position: relative; width: 3552px; height: 2144px;"></div>
</div>
But I think that somewhere in the .js the size of the image is calculated.
My .js sucks so I won't be able to find it (I still gonna try)
I hope anyone uses slimbox and can help me!
M.
---------- UPDATE -----------
Crap; I found this:
SlimBox FAQ
I have these two divs:
<div id="ing" style="position:relative;">
<div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; ">
</div>
</div>
And then in JS I set tinymce to the "ingredients" div. How to make these two divs share a scrollbar like this: http://jsfiddle.net/userdude/hThsx/
Problem her is that your editor uses a contenteditable iframe with an own document.
So this iframe has an own scrollbar and you cannot do anything about it except adjusting the iframe dimensions to the inner documents dimensions. In this case there won't be a scrollbar for the editor iframe.
Now you may follow Cobra_Fasts idea of putting a wrapper div around your two divs and let it have a scrollbar.
I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.
I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.
Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.
The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)
I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.
Thank you in advance, Carl
So, as suggested in the comments
http://jsfiddle.net/lollero/Sw4y8/
It's a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.
HTML:
<div class="slide">
<img src="http://placekitten.com/g/500/230" alt="" />
<div class="text">Text</div>
</div>
</div>
<div id="thumbnails">Thumbnails</div>
CSS:
#slides {
height: 550px; /* or what ever amount is big enough to fit the text there too */
float: left;
position: relative;
z-index: 5;
}
#thumbnails {
float: left;
clear: both;
position: relative;
z-index: 10;
top: -110px;
}
.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }
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.