I follow this tutorial to make Carousel slide .
When I define each item contain image and paragraph as -
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it's work fine (here its jsFiddle) .
But when I reduce it to paragraph only as -
<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it stop working (here its jsFiddle) .
How could I make it work with only paragraph such that is slide the text each switch ?
The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:
.carousel-caption{
position:static;
}
Here's the demo of it working both with and without image:
DEMO
The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.
See after removing image and leaving only paragraph
i gave the item container class the width and height of image with a background colour to div to indicate the presence just copy and paste this code in fiddle css section and run to see the change
.item{
height:480px;
width:1200px;
background-color:orange;
}
Related
i need your help.
I have profile page, i researched lots of websites, but i can't found, can you help me?
I need to center all all of the items, and my image has to be like ANGELA YU (image of the top, you can see).
Please help
<div className="asd">
<img alt="123" src={asd}></img>
<div className="top-container">
<div></div>
<div className="user-profile-img">
<img alt="profileImg" src={user.photoURL}></img>
</div>
</div>
<div className="middle-container">
<p>Your email: example#gmail.com</p>
<p>Your user id: 123213213213</p>
<p>Your display name: ASDSADASDSA</p>
</div>
</div>
Try to create a common class .textCenter{text-align:center} and use it in the each parent <div> example <div className="middle-container textCenter"> the all the child elements in this will be aligned center to that <div>.
If you want the name in 2 lines as you shown in the above sample image then you need to give max-width to the name tag example: max-width:'50px'
Just add text-align:center to the classes that you want the text to be centered. Here you can see how to center an image. Just google.
I suggest using flexbox.
You can wrap the content you want to center in a div, and apply this CSS to it :
display:flex;
justify-content:center;
Here is a cool website to learn flexbox.
I make 'close' icon in header of my text, so i want to make the "close" icon still available/ still on there when i scroll down. please help
<div class="content">
<img class="btnclose" src="images/close.png" onclick="showMenuform()">
<br>
<br>
<img src="images/TOEFL.gif" alt="">
<br>
<br>
<br>
<div class="text">
/**my text**/
</div>
</div>
http://codepen.io/KevinWang15/pen/jqpoQd
Is this what you're looking for?
move <img>,<div>.. (all the content you want still on) out of the .content div, into a new div
set css of the new div to:
style="position:fixed;top:0px;right:0px"
try to write btnclose class out from content class or change btnclose with id instead so you write css for btnclose id too
Also, try adding a display css property to it.
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!
<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation"> </h5>
</div>
Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.