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");
})
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();
});
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;
}
I bought Revolution Slider plugin for HTML (not wordpress) and i have wierd problem.
So i tried putting example slider on my page, and instantiate it, and everything works. I want full width slider with 420px height... But when i putt 420px in initialization of slider, i dont see textual content, because image gets to much in width and it makes overflowed slider thats hidden below content.
I dont know how to have full width image acting like background-size:cover in css... I dont want it to have auto height.
<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
<div id="slider1" class="rev_slider_wrapper fullwidthbanner-container" data-version="5.0">
<ul>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide1.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide2.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
</ul>
</div><!-- END REVOLUTION SLIDER -->
</div><!-- END OF SLIDER WRAPPER -->
and tihs is init
jQuery(document).ready(function() {
jQuery("#slider1").revolution({
sliderType:"hero",
sliderLayout:"auto",
delay:9000,
navigation: {
arrows:{enable:true}
}
});
});
i tried here in init to put gridheight, gridwidth, sliderType:"fullwidth", sliderType:"standard", but none of that gives me fixed max width on image :S image is 1440x430, and i want it to take full width, and height as it can be, without stretching and taking more then those 430px.
What am i doing wrong. Here is no css at all, its bootstrap used, and no custom css on slider
I'm using the following code with bootstrap to create a banner directly on top of my page. Problem is, the image is at the the very left corner of my page. As soon as I delete the id='banner' flag, the image starts at the correct point just like the rest of my page. Is it because it's not treated as an bootstrap-span-element anymore? I'm sure there is an easy solution. Thanks for help.
<body>
<div class="container" id="banner">
<div class="row">
<!--span>fdsssssssssssssssssssss</span-->
<img src="images/fcrlogo.png" max-width="100%" max-height="100%" class="span1">
<!-- h1> Your banner </h1 -->
</div>
</div>
I've been googling this for days and although there are many similar threads the answer still eludes me. I have pared the problem down to this:
<div data-role="header" data-id="myHeader" data-theme="none" data-position="fixed">
<img src="images/my1200x150logo.jpg"/>
</div><!-- /header -->
<div data-role="content">
<p>Content line 1</p>
<p>Content line 2</p>
<p>Content line 3</p>
<p>Content line 4</p>
<p>Content line 5</p>
</div><!-- /content -->
<div data-role="footer" data-id="myFooter" data-theme="c" data-position="fixed">
<h4>My footer</h4>
</div><!-- /footer -->
I am trying to achieve a RWD effect with the logo image resizing to fit the page. This all works perfectly except for the initial page load, which sets padding-top to zero in the jqm updatePagePadding routine causing the content to flow up under the image.
I understand that images load hours after the js is run and this is a common issue. Any event such as a page resize causes the padding to be updated correctly.
So my question is, how can I force JQM to call updatePagePadding after my image(s) have finished loading ?
Jquery pageshow event ? link to the API
Basically jquery will fire an event after the page is loaded, and the elements are ready you can wait for that event and then call you function, example:
$("#pageID").on("pageshow",function(){
updatePagePadding();
});
Also check this for complete reference on what events are binded to every jquery mobile page, page widget API