Semantic UI transitions on page load - javascript

I am using semantic ui. I want the transitions to occur when the page loads in browser. What I am able to do right now is hover on transition. Is it possible to do?
$(document).ready(function(){
$('#animate').hover(function(){
$(this).transition({
debug : true,
animation : 'jiggle',
duration : 500,
interval : 200
});
}, function(){});
});
<h1 class="ui header" id="animate">
<div class="content">
Hello
<div class="sub header">hello.</div>
</div>
</h1>

You can add transition to the DOM element on the document ready function.
$(document).ready(function(){
$('#animate').transition({
debug : true,
animation : 'jiggle',
duration : 500,
interval : 200
});
});
Here is the FIDDLE

Related

Why is window.scrollTo() not being called?

I'm using Bootstrap's Buttons plugin toggle state feature on a custom checkbox. When this button is toggled (on), a hidden element should appear near the top of the page and then the page should scroll to the top. When the button is toggled next (off), the element should disappear and the page should scroll to the top.
The hidden element is toggled when the button is toggled on and off but the scroll is not working.
Changing the data-toggle from 'buttons' to 'button' makes the scroll work but does not visibly toggle the button so that is no good.
I tried setting an onchange event for the checkbox itself but that also doesn't scroll.
It seems that Bootstrap's function for the onclick event is doing something that doesn't allow my onclick function to run properly. I failed at trying to understand it so far (I will keep trying).
Setting a timeout for the window.scrollTo() function makes it work. Why could this be? Is there a way to do this without the timeout?
<body>
<div class="container">
<div>
<h3>Toggle Header and Scroll To Top</h3><hr />
<h1 id="displayMe" class="d-none">Display Me</h1>
<div style="height: 100vh;"></div>
<div class="btn-group-toggle btn btn-success custom-control custom-switch" data-toggle="buttons" id="myButton">
<input type="checkbox" class="custom-control-input" id="myCheckbox">
<label class="custom-control-label" for="myCheckbox">Toggle and Scroll</label>
</div>
</div>
</div>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/twitter-bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#myButton").on("click", toggleAndScroll);
});
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
//setTimeout(function () {
window.scrollTo(0, 0);
//}, 100);
}
</script>
</body>
https://jsfiddle.net/ews9q50v/
(Uncomment the setTimeout lines to see it working)
I have no idea why it doesn't work. Bootstrap is messing something up.
But you can easily bypass it by moving scrollTo to the end of event loop using setTimeout(func, 0).
$("#myButton").on("click", toggleAndScroll);
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
setTimeout(function () {
window.scrollTo(0, 0);
}, 0);
}
demo
This seems to work for chrome but Firefox is having other issues:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
But since you are using jQuery something like this works in both Firefox and chrome:
function toggleAndScroll() {
$('#displayMe').toggleClass('d-none');
$("html, body").animate({ scrollTop: 0 }, "slow");
}
I'm not entirely sure what the issue is - probably something to do with the scroll height changing at the same time as scrollTo is called.

changing slimscroll position

Is there a way to move scrollbar position on initialisation when using slimscroll? I found it's possible to do this using jQuery on native scrollbar with "scrollTop", but don't see how would I be able to do it using slimscroll. Here is a fiddle. http://jsfiddle.net/c8d3ohue/
Basically I want the first div to be scrolled down on init, like in this picture.
My code:
<div class="slimScroll" style="overflow-y:auto;height:200px;width:250px">
<div class="child-height-1" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightgreen">asd</div>
</div>
<div class="child-height-2" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightyellow">asd</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js"></script>
<script>
$(function () {
new slimScroll($('.child-height-1')[0]);
new slimScroll($('.child-height-2')[0]);
});
</script>
If you use jquery.slimscroll.min.js instead of slimscroll.min.js, you can do this like this.
For your same HTML above, in the document ready you can do like this,
var itemContainer1 = $(".child-height-1");
itemContainer1.slimScroll({
height: '200px',
start: 'bottom',
alwaysVisible: true
});
var itemContainer2 = $(".child-height-2");
itemContainer2.slimScroll({
height: '200px',
start: 'top',
alwaysVisible: true
});
See a fiddle,
http://jsfiddle.net/anjanasilva/uypabr6o/
How it looks,
Hope this helps.

Infinite Scroll + Masonry loading all items

I'm trying to set up Masonry with Infinite Scroll, it works but it currently loads all items and then when I click on the next page link it loads them all again.
Nav:
<div class="more" id="navigation">
MORE IDEAS
</div>
JS:
$(document).ready( function() {
(function() {
// Main content container
var $container = $('.grid');
// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
percentPosition: true
});
});
// Infinite Scroll
$container.infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : "#navigation",
// selector for the NEXT link (to page 2)
nextSelector : "#navigation a",
// selector for all items you'll retrieve
itemSelector : ".grid-item",
},
// Trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
// Pause Infinite Scroll
$(window).unbind('.infscr');
// Resume Infinite Scroll
$('.more a').click(function(){
$container.infinitescroll('retrieve');
return false;
});
})();
});
Content:
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
Currently it loads all items, 1 to 6, then when I click the Load More button it loads items 1 to 6 again. I've looked on the couple of other questions which are similar to this but they are different circumstances. It's probably something simple, any help would be most appreciated.
Figured it out.
You need to take part of the content you want loaded second out and put it in another html page. Then you need to set the navigation link to go to that page. As it was just set to ?page=2 it was just loading the same page again.

Show this div and hide that div

Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show
<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde
<div style="display:none;">
<div id="demoView">
<div class="fl w900 pa20 bg2 tac">
<h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
<h4 class="ff2 fwb fs26 mb40 cf3">Email: <span class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info#caremerge.com">info#caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
<img src="images/sites/demo1.png" alt="" class="dpib mb20"/>
</div>
</div>
</div>
The function below is successfully hiding the video but its not displaying the div mentioned above in it...
function onPause() {
froogaloop.addEvent('pause', function(data) {
//$('a[href="#various2"]').fadeOut();
$('#divVideo').fadeOut(500);
// $('#various2').fadeOut(500);
//$(' #demoView').fadeIn(500);
$('#demoView').fadeIn();
alert('ST-UCK');
});
}
Some part of FANCY BOX JQUERY OF MY CODE
jQuery(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("#various2").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'onClosed' : function() {
document.getElementById('iframe-video');
},
'onStart' : function() {
//alert("hi");
//$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
}
});
When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.
So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.
Maybe you just need to trigger the second fancybox inside your (pause) event callback like
function onPause() {
froogaloop.addEvent('pause', function(data) {
$('#example4').trigger("click"); //linkfunctionality you want to show
});
}
... that will bring the second content (#demoView) inside fancybox and the current (#divVideo) will just fade out.
Is it now because the enclosing div for demoView is hidden? So something like...
$("#demoview").parent().css({'display','inherit'});
May work?
Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.

How to make a loading.gif appear using jQuery?

I have a tabbed box that displays different information depending on which tab is active. How can I make to where when a user clicks on a tab a loading gif appears in the foreground of the .print-area and just dims the background until everything is loaded? I also have a filter option so the user can filter the contents in the .print-area so however we manage to do this cant be just on load of this area... it has to work anytime something needs to change in the area. The code below is my code, modified slightly to preserve privacy.
I am using ajax/jquery to load any information and alter any information in the .print-area.
Html
<div id="tabbed-box" class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Access Log</li>
<li>Conduit Log</li>
<li id="space"> </li>
</ul>
<!--Main box area under tabs-->
<div id="content" class="content">
<table height="auto" width="auto">
<td align="left" valign="top" width="35%">
Keyword: <input type="text" id="highlight_box" class="text_box" value="--Text--" />
<input type="button" id="highlight" value="Highlight" /> //when clicked the loading gif appears and highlight action begins
</td>
<td align="right" valign="top">
<img id="play_pause_toggle" src="images/Pause.png" /> //there is a tail feature and this would toggle it with jQuery
</td>
</table>
<!--Print area for the Access log-->
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area">
//When this tab is clicked a jQuery function will be called that will load the log into this section
</div>
</div>
<!--Print area for the Error log-->
<div id="error_content" class="tabbed-content">
<div id="error_log_print" class="print-area">
//When this tab is clicked a jQuery function will be called that will load the log into this section
</div>
</div>
</div>
showLoadingMsg();
$.ajax({
url : '<url>',
success : function (serverResponse) {
hideLoadingMsg();
}
});
function showLoadingMsg() {
$('body').append($('div').css({
position : 'absolute',
width : '100%',
height : '100%',
zIndex : 1000,
background : '#000',
opacity : 0.5
}).attr('id', 'loading-message'));
}
function hideLoadingMsg() {
$('#loading-message').remove();
}
This will display an opaque overlay over your site when the showLoadingMsg() function is called and that overlay will be removed from the DOM when the hideLoadingMsg() function is called.
To show this overlay when an AJAX request is being made, we call showLoadingMsg() just before the AJAX call and in the AJAX call's callback function we call hideLoadingMsg().
If you are using .load() then your code would look more like this:
showLoadingMsg();
$('.print-area').load('<url>', function () {
hideLoadingMsg();
});
UPDATE
function showLoadingMsg() {
$('#access_log_print').css('opacity', 0.5).append('<img />').attr('src', '/path/to/loading-spinner.gif').css({
position : 'absolute',
width : 100,
height : 20,
marginTop : -10,
marginLeft : -50,
left : '50%',
top : '50%',
zIndex : 1000
}).addClass('loading-spinner');
}
function hideLoadingMsg() {
$('#access_log_print').css('opacity', 1).children('.loading-spinner').remove();
}

Categories

Resources