I am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.
However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.
You can view the page here.
You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.
Their example has each slide within it's own and then the caption inside another div like so:
<div class="slide">
<img src="/images/myimage"/>
<div class="caption"><p>this image is awesome</p></div>
</div>
Without actually trying it, I think you may be missing the slide as well as the child caption classed div's
Related
I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>
So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!
Please bare with my poor drawing.
As you can see from the image below. I am using a bootstrap Carousel control which is reference from
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Within the control I am setting the carousel as
<div class="carousel carousel-fade slide home-slider....>
....
</div>
which would make it have the effect of fade-in and fade-out on sliding.
And I am making the "Front element" (in red) sits on the top of the carousel by making its "style='margin-top:-40px'"
My issue here is that every time the sliding animation triggered, the front element is having this fade-in/out effect as well which is not desirable.
How can I make the front element as non-flashing while keeping the background carousel has the effect. Is that possible?
Thanks
create a custom-container div with position:relative and put the Carousel inside the container, then make your Front element as position: absolute and put it in the container Out of the Carousel. so the place of your Front element is after last Carousel closed tag and before the container closed tag.
structure:
<div clas="container" style="position:relative">
[Carousel]
<fronElement style="position: absolute;bottom:40px" ></frontElement>
</div>
I have an effect I want to achieve, but I'm having trouble thinking of exactly how I could achieve it. Here are some images that show the progression of the effect I want to achieve: http://imgur.com/a/In6IK
So essentially, I have multiple slides containing text which I want to automatically display one by one. In order to hide the current slide and show the next one, I want an image (which sits to the left of the text) to slide to the right, covering/hiding the text as it goes, and then when it slides back to its original position, the text for the next slide is shown.
So how would I go about achieving this effect?
Here is a raw idea. Maybe you can make use of :after and :before and position them so that they hide the text, making it disappear.
HTML would be something like:
<div class="main">
<div class="over"></div>
<div class="text">This is some text</div>
</div>
And for CSS look in this fiddle http://jsfiddle.net/Zs2MU/
Maybe it will help you in your situation.
UPD Here is updated solution which supports multiline text http://jsfiddle.net/Zs2MU/2/
I need to make my image fit into my div and I only want the picture to be inside the div. The rest of the picture will be behind the other elements.
Basically I want to achieve the same effect as here http://tommywebdesigner.com/Home%20Page.html but with the <div id="background">and <div id="content"> that I have created.
As you can see first i gave margin-bottom="350px to the header in order to create a blank space, here i have the space for the img in my div id="background"which is located under (z-index: -1;) and the rest of the elements is placed over inside the the div id="content" (z-index:2;)
Now I need Javascript which will fit this image into the <div id="background">. The image is not located between the menu-bar and the rest of the elements
Here you can look: http://fiddle.jshell.net/CGJmE/10/
Here the effect i want to achieve playing with these div: http://tommywebdesigner.com/Home%20Page.html
The reason why i want to do like that is beacuse in the future maybe i will need to put a video there and i couldn do with background-image as i have done here
I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();