I tried putting a dropdown but hes not on top of other elements. I tried puting z-index but still no luck. I've make the position: 'relative' but the element got pushed down when hovering on the dropdown button.
heres the site http://jaysonvelagio.webprodigymedia.com/
<div id="believe-belong">
<div class="site-width">
<div class="two-col">
<div class="two-col-one image">
<img src="assets/image/dine.jpg" alt="CLICKTREP Dining Privileges" />
</div><!-- .two-col-one.image -->
<div class="two-col-two">
<h3 class="green">Dine</h3>
<p>Taste your favorite mouthwatering dish for less on restaurants/Café/Bakeshop of your choice all over the Metro. Take advantage of the regular discounts and perks whenever you visit our partners.</p>
<div class="dropdown">
<button class="dropbtn">partners in dine</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div><!-- .two-col-two -->
</div><!-- .row.two-col -->
</div><!-- .site-width -->
</div><!-- #believe-belong -->
<div id="gray-back">
<div class="site-width">
<div class="two-col" >
<div class="two-col-two">
<h3 class="green">Shop</h3>
<p>Instant Discounts anytime from today’s best Shopping stores. <br>Like Toby’s Sport, RUNNR, Ideal Vision and a lot more. </p>
Partner Stores
</div><!-- .two-col-two -->
<div class="two-col-one image">
<img src="assets/image/shop.jpg" alt="CLICKTREP Dining Privileges" />
</div><!-- .two-col-one.image -->
</div><!-- .row.two-col -->
</div><!-- .site-width -->
</div><!-- #believe-belong -->
I had a play with your code in the website and seems your issue is a bit more complex to solve than you think.
The reason you won't get that dropdown is that you have overflow:hidden on the parent div with class two-col.
Now if you try and add overflow:visible to that it messes with the whole DOM structure as you can see:
The only way you can fix this is to add overflow:visible to your div and see how you can rearrange the structure.
UPDATE:
I had another play with it with only adding overflow-y:visible. This time it doesn't mess with the UI but adds a scrollbar to that div. If that's OK you can proceed with this one.
.two-col {
overflow-x: hidden;
overflow-y: visible;
position: relative;
}
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
Long time reader, first time poster.
I have recently started learning to use bootstrap.
I am stuck trying to get the a Bootstrap carousel to preload showing a spinning wheel (or similar effect).
I have pieced together the effect I'm going for, my first four images 'flick through' and the carrousel stops on my final image – but what I can't manage is to have the entire carousel content load behind a spinning wheel before the carousel starts.
This is my work in progress – http://maxsendak.com/test/pu_v2/max.html – so you can see, it is the whole header tag that needs to load with a 'load in progress' before it fires the carousel script and starts flicking through the slides.
<header id="myCarousel" class="carousel carousel-fade" data-ride="carousel" data-wrap="false">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- START big image panel --><div class="item active">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/1.jpg');">
<div class="text-vertical-center people_text_over_image">
</div>
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/2.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/4.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/3.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/5.jpg');">
<div class="text-vertical-center people_text_over_image">
<h1>Max Wilson</h1>
<h3>Creative</h3>
<br>
See More
</div>
</div>
</div><!-- END big image panel -->
</div>
</header>
Script to fire carousel needs to fire after everything is loaded.
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
</script>
As is often the case when I'm learning my way around these things, I think it might be that I am missing something simple – is this the case?
Remove the data-ride="carousel" - this is what triggers the carousel to start moving at page load. Instead you can start the carousel manually with javascript whenever you are ready with
$('.carousel').carousel()
Note - if you want to wait till your images have all loaded. You'd put this manual start in a window load like so
$(window).load(function() {
// + any other carousel related stuff that has to wait for the images to complete loading
$('.carousel').carousel()
})
jQuery solution would be adding d-block to all .carousel-item elements, and placing this at the bottom, after <body> tag:
$(window).on("load",function() {
$('.carousel-item').removeClass("d-block");
})
so I am making a page with three nav tabs on the left and a map on the right. I have my code here for the nav tabs. On the first tab I want a field where the user can enter some info and the map will adjust accordingly. It works fine once the page loads, but if I visit another tab and come back then the input field will be gone. Any ideas?
<div class="tabbable" class='span4'> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li id='tab1' class="active">Browse</li>
<li>History</li>
<li>Wishlist</li>
</ul>
<div class="tab-content">
<!-- Browse tab -->
<div class="tab-pane active" id="tab1">
<form class="form-search">
<input type="text" class="input-medium search-query" id='location'>
<button type="submit" class="btn">Search</button>
<p><b>Find brewery by name..</b></p>
</form>
</div><!-- end Browse Tab -->
<!-- History tab -->
<div class="tab-pane" id="tab2">
<p>I've been here!</p>
</div><!-- end History tab -->
<!-- Wishlist tab -->
<div class="tab-pane" id="tab3">
<p>We still have to check these places out!</p>
</div><!-- end Wishlist tab -->
</div>
</div>
Since your nav links are a tags using anchors in their href, the page is reloaded on click. A page reload will reset any entered form information.
Is there a way to do it where I do not have to refresh? Should I change the a tags to something else?
Yes like this (looks ugly, works great IMO):
alternatively, with HTML5 you can leave out the href altogether
<a></a>
but...I wouldn't recommend that, probably some backwards compatibility issues.
After re-reading your original question though I don't think this is the root of the problem, hard to tell without a live example though.
I have something like this
I have these in a row-fluid with span6. However, I when I do span5 on both of them, they float off the left side, leaving a lot of white space on right free. Can I center them on page ?
Because .offset classes don't work in Bootstrap v2.0.4, you can use .span1 classes to create empty space on left and on right side around those two elements. Like this:
<div class="row-fluid">
<div class="span1">
<!-- empty -->
</div>
<div class="span5">
<!-- content of left element (tree map) -->
</div>
<div class="span5">
<!-- content of right element (datatables) -->
</div>
<div class="span1">
<!-- empty -->
</div>
</div>
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.