How can I disable the Bootstrap from resizing my button inside of a div element. It is an order button and it gets almost invisible if used in mobile device.
It is actually an a tag with an img inside of it.
Here's the following script:
<div class="buttonImage" style="color:green" style="font-size: 2">
<a href="transaction.html?totalprice=3000">
<img src="img/orderbutton.png" width="15%" height="15%" onmouseover="this.src='img/orderbuttonhover.png'" onmouseout="this.src='img/orderbutton.png'" alt="OrderButton"/>
</a>
<label class="cash">3000 Points</label>
</div>
Is there any suggestion to not resize this button? My div element will not be resized, but the buttons will instead. And also, the most left button resizes first before the middle and right button (there are 3 divs horizontally, 6 divs vertically).
Remove width="15%" height="15%" and add the class of img-responsive and apply mobile classes to the parent div for mobile screen's.
<div class='col-lg-2 col-xs-12'>
<div class="buttonImage" style="color:green" style="font-size: 2">
<a href="transaction.html?totalprice=3000">
<img class='img-responsive' src="img/orderbutton.png" alt="OrderButton"/>
</a>
<label class="cash">3000 Points</label>
</div>
</div>
This format will ensure that when your viewing the block from anything that is smaller than desktop at two columns it will get the max width so it's not tiny.
Related
I am using this "Image Slider with Dots (pure JS)" codepen which works very well on the page by itself, but whenever I place it inside a div for example an "outer shell" the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that's how I ran into this issue of the carousel having zero height once it is placed inside another div.
Here is the HTML of the slider with my custom class "outer-shell" around it, which makes the slider have zero height:
<div class="outer-shell">
<!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
There's quite a bit of CSS and JS along with the HTML, I thought it would be easier to have it linked rather than pasting it here. "Image Slider with Dots (pure JS)"
I have spent a good amount of time using Chrome Developer Tools looking at the individual pieces of the slider (trying different overflow properties), and I think it comes down to the images have an absolute position, because when I deselect the css property the first image would show. I am not sure if the outer div is messing up the positioning of the page?
i think your .dots class have position: absolute; that is why it is shown inside your div without needed a height property and when you add height to outer-shell you can see images too.
<div class="outer-shell">
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
.outer-shell{
height: 100%;
max-width:80%;
margin:0 auto;
}
I'm using javascript and CSS to fade an image behind a menu, but the menu should stay visible. For some reason the menu fades also. It shouldn't since I'm not targeting those elements. Here is an example.
Based on your link, if you add a z-index value of 1 or greater to your menu class, then the menubar will not fade.
<div class="header-wrapper">
<div class="menu" style="z-index: 1;">
<span>Schedule</span>
<span class="spacer">|</span>
<span>Sponsors</span>
<span class="spacer">|</span>
<span>Bio</span><a name="bio"></a>
</div>
</div>
I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?
The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it
I have a problem with PrettyPhoto
in inline content there is two div and one button.I want that when I clickedn button divisionImage will hide and divisionVideo will show. here is a codes inline content and div hide show function not working
<div id="inline-content" class="hide" style="text-align: center;">
<input id="btn1" type="button" name="btnCzmVideo" value="Çözüm Videosu"
onclick="VideoGoster()" />
<div id="divisionImage" style="text-align: center;">
<img id="imgCozumIcerigi" src="#" />
</div>
<div id="divisionVideo" style="display: none;">
</div>
</div>
function VideoGoster() {
$("#divisionImage").css('visibility', 'hidden');
$('#divVideo').show();
}
Problem Solved
actually divs hided and showed but u cant see
in prettyphoto modal when press right arrrow PrettyPhoto Content refreshed and your divs is hided and showed what you wanted.
send right arrow key or left arrow key to page programatically and problem was solved
I am developing a responsive Slide show where the user can upload any number of images, and the application dynamically generates a slide show that can fit in any device. Now there is a problem i am facing here
<section id="container">
<article id="slider">
<div id="item"><img src="img/image-1.jpg" alt="" /></div>
<div id="item"><img src="img/image-2.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
</article>
<article id="nav">
<div id="prev" onclick="prev();"><img src="img/prev.png" alt="" /></div>
<div id="next" onclick="next();"><img src="img/next.png" alt="" /></div>
</article>
</section>
The above Html code is generated by my java code. Here the user has uploaded 5 images. Now each image will occupy a fixed with of 300 px. so total width will be 5*300+5*padding. Now i can set the width of the container dynamically in my java code to fit all the images in a single row, and hide the ones the exceed 940px, as seen in most normal slide shows. I want know whether there is a css solution to this like shrink wrapping which shrinks the inline divs, here i want to expand the container.
Regards,
Maclean
I would suggest use display:inline-block to inner elements, and white-space:nowrap for outer div. If you can create a jsfiddle that would be helpful to show code changes.