Bootstrap Carousel Wont Start Cycle Automaticly - html

I've been working on my carousel and it seems to be working now.
It start cycling, but not before I've hovored my cursor once over it. How do I make it start cycle automaticly, so people doesn't have to hover the carousel.
Heres my code:
<div id="slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide2.jpg" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide3.png" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide4.png" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
</div>
<a class="carousel-control left"href="#slider" data-slide="prev">‹</a>
<a class="carousel-control right"href="#slider" data-slide="next">›</a>
</div>
<script>
$('.carousel').carousel({
interval: 1000
})
</script>
<script src="js/bootstrap-carousel.jss"></script>

Other than adding placeholder images, I took your exact HTML and it seems to work correctly for me # http://www.bootply.com/66558 .
Perhaps you could double-check everything is good with your CSS and JS files, or alternatively try using CDN versions for troubleshooting
Good luck!
EDIT
If the above still doesn't work for you, try initialising with
$(document).ready(function () {
$('.carousel').carousel({
interval: 1000
});
$('.carousel').carousel('cycle');
});
See live: http://www.bootply.com/66559

It seems to work with the "cycle" but how do I change the interval then? It goes so quickly if I add the cycle.
EDIT
Never mind, I just took the interval from 1000 to 10000, now it seems to work perfectly. THANKS YOU SIR!

Still havent helped me, nor browsing git hub discussions.
Everybody seemed not to see the real problem that the carousel is really pausing when the mouse is on the container....so I had to read through the .carousel docs
and its really there... pause atribute have to be set on null or its on default set to "hover" which will pause it ...
so for me add this is the resolution:
add the interval, set pause on null, and then manually call the carousel
<script>
$(document).ready(function () {
$('.carousel').carousel({
interval: 3100,
pause:null
});
$('.carousel').carousel('cycle');
});
</script>

I had to add delay for carousel starting function. For some reason it did not start after routing to another page view.
This is what did the trick for me:
<script>
setTimeout(function() {
$('.carousel').carousel();
}, 3000);
</script>

Related

How to show/hide chosen image on button click in query

I would really appreciete any help in the following task.
The task is pretty simple. I have a couple of paragraphs of text. Each paragraph has a title and desription. Decription should be hidden, and shown only after clicking "plus" button. On click "plus" icon should change to "minus". So far, I have maganed to acheve this. But then, after clicnkin again, text should hide again (that works), but the icon should change to "plus" again. And here I am failing. I have tried many ideas I found in the Internet, but could't make it working.
My HTML code:
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
jQuery code:
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).closest(".toggle-description").find(".more-text").toggle();
var button_plus = $(this).closest(".toggle-description").find(".plus-icon");
button_plus.css("display", "none");
var button_minus = $(this).closest(".toggle-description").find(".minus-icon");
button_minus.css("display", "block");
});
});
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).find(".plus-icon").toggle();
$(this).find(".minus-icon").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
In the jquery part change this button_plus.css("display", "none"); to button_plus.toggle() and button_minus.css("display", "block"); to button_minus.toggle() and it works.
jsfiddle link

DFP ads not always showing on all browsers

We have implemented multiple ads on our site and it has been working fine since recently. We have not touched our line items but created a few new creatives which are currently displaying. However, since this change, we randomly end up with certain ads not showing at all causing blank spaces. We have not touched the initial code or ids. We have tried logging into user accounts and that seems to cause ads to load more often but we still sometimes sit with an empty space block.
I have tried to research this subject but cannot find a solution. I have tried the fixes stated by this site but it did not help.
I have also looked at this discussion where they stated the importance of having a user account, which seemed to help but we still sit with blank spaces instead of ads from time to time.
<div>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/191675786/bottom_mobile', [300, 250], 'div-gpt-ad-1470805011041-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/top_mobile', [320, 50], 'div-gpt-ad-1470804718031-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/bottom_widescreen', [728, 90], 'div-gpt-ad-1470804049204-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/right_side_1', [300, 600], 'div-gpt-ad-1470775758148-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/middle_mobile', [320, 50], 'div-gpt-ad-1490793232691-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/right_side_2', [300, 250], 'div-gpt-ad-1470775758148-1').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</div>
<aside class='adverts'>
<div class='mobile-advert text-center'>
<!-- /191675786/top_mobile -->
<div id='div-gpt-ad-1470804718031-0' style='height:50px; width:320px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470804718031-0'); });
</script>
</div>
</div>
</aside>
<aside class="adverts padding-medium-top">
<div class="widescreen-advert">
<!-- /191675786/bottom_widescreen -->
<div id="div-gpt-ad-1470804049204-0" style="height:90px; width:728px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1470804049204-0"); });
</script>
</div>
</div>
</aside>
<section class='rightside-container col-sm-4 col-xs-12'>
<aside class='adverts'>
<div class='mobile-advert text-center'>
<!-- /191675786/bottom_mobile -->
<div id='div-gpt-ad-1470805011041-0' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470805011041-0'); });
</script>
</div>
</div>
<div class='widescreen-advert'>
<!-- /191675786/right_side_1 -->
<div id='div-gpt-ad-1470775758148-0' style='height:600px; width:300px; margin-bottom: 20px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470775758148-0'); });
</script>
</div>
<!-- /191675786/right_side_2 -->
<div id='div-gpt-ad-1470775758148-1' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470775758148-1'); });
</script>
</div>
</div>
</aside>
</section>
We have not found any solution as of yet and we do not understand why it only show ads sometimes but not always. Correct me if I am wrong but if the code was incorrect, wouldn't that mean that no ads would show ever?

Hide main div in which sub div contains specific text

I'm trying to make my first Tampermoney script
Here's an example of an html page :
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
<div class="a">
<div class="d">
<div class="e">
...
<div class="n">
"Hello world"
</div>
</div>
</div>
</div>
I found this topic, very interesting, but I'm not able to make it fits my requirements : Hiding div that contains specific string
I would like to hide the divs class="a" ONLY if it contains a div class="n" that contains the text "Hello world".
Do I need to loop on all the divs class="a", to seek for a class="n" containing "Hello world" ? I'll need some help please...
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
Hmmmm, I think it needs a few ajustements...
Here's my code :
$(window).load(function(){
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
});
The web page :
And the associated code :
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
[...]
Also, I can't put in the webpage :
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
When I try to execute the commande in the console :
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
(unknown) Uncaught Error: <![EX[["Tried to get element with id of \"%s\" but it is not present on the page.","._5g-l:contains(\"Publication suggérée\")"]]]>
at h (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:166)
at i (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:293)
at <anonymous>:1:1
I think this will help you. And you want if class .a contain .n with text("hello world") , .a need to be hide. I just make edit your HTML part and also comment out which div will be hide. According to your HTML first one will be not hide because .n contain "test".
if any question or if you found anything wrong on my answer ask me. :) Live On Fiddle
UPDATE: In your Code the problem in your parent div you have 5 class _5jmm, _5pat, _3lb4, m_95yeui-j, _x72 but you write in jQuery closest('.5jmm _5pat _3lb4 m_95yeui-j _x72').hide(). So you can set only one class which is closest. And you don't
$(window).on('load', function() {
$('._5g-l:contains("Publication suggérée")').closest('._5jmm').hide();
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
</div>
</div>
</div>
</div>
</div>

Hidden div in my html file

I am currently using scrollNav.js after I fused it in with my HTML I noticed there is some extra div showing in my HTML.
But I can only detect this div through Google Devtools (f12). Is this even possible?
This is my HTML file:
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<div class="tagline post-article"> <!--row1-->
<h2>HI !</h2>
</div>
And this is the div according to DevTools (f12)
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><span class="scroll-nav__heading">Scroll To</span><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view">HI !</li></ol></div></nav><div class="tagline post-article"> <!--row1-->
<section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
</div>
*My current update now is I am able to delete the "scroll to" by typing False in showheadline and the rest of all additional div by setting display:none
and become like this:
But this is not the result that I wanted to. i want it to be crystal clear, where it came from and how to overcome it instead of just making it hidden.
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view">HI !</li></ol></div></nav><div class="tagline post-article"> <!--row1-->
<section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
</div>
the script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scrollNav/jquery.scrollNav.min.js"></script>
<script>
$('.post-article').scrollNav({
sections: 'h2',
subSections: false,
sectionElem: 'section',
className: 'scroll-nav',
showHeadline: false,
showTopLink: false,
topLinkText: 'Top',
fixedMargin: 40,
scrollOffset: 40,
animated: true,
speed: 500,
insertTarget: this.selector,
insertLocation: 'insertBefore',
arrowKeys: false,
scrollToHash: true,
onInit: null,
onRender: null,
onDestroy: null
});
</script>
How do I delete the extra div that I don't even know where it came from?
The extra div is not extra. It's created by the scrollnav library you're using. Many plugins and libraries create extra elements on the dom in order to add their features. Nothing to worry about :)

ng-if and ng-show in my Ionic application, neither works

The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};