Develop Reference

Semantic UI transitions on page load

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

Advanced Custom Field data not showing in Fancybox in Wordpress

I'm using the Advanced Custom Fields plugin in Wordpress to output an image with a link (also using to add embed code for a custom video player) into posts on an archive page. The output code for the custom field is placed in a div which is hidden and then loads up in fancybox when the .watchsession link is clicked. The problem is, the ACF content doesn't load in the fancybox when called. If I place the code outside of the hidden div it shows. Not sure where I've gone wrong. Code below!
Cheers,
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a id="fancybox-button" href="#fancybox-content" class="watchsession" title="<?php the_title(); ?>">Watch</a>
<div style="display: none;">
<div id="fancybox-content" style="width:600px; height:400px;overflow: hidden;">
<img src="<?php the_field('upload_screenshot'); ?>"/>
</div>
</div>
</article>
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$("#fancybox-button").fancybox({
helpers : {
title : {
type: 'inside',
position : 'top'
}
},
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
});
});
} ) ( jQuery );
</script>

Figured it out, needed to give a unique ID to each post, so changed the href of the opening link to the post id and div id in the fancybox and that fixed it!
Cheers

Is it possible to open fancybox with a class in href?

I have this link to open my div #fancyContent in a fancybox:
<a class="fancybox" href="#fancyContent"></a>
Here I have my div #fancyContent:
<div id="fancyContent">
//here I have some content
</div>
And it is working fine,
But I want to pass my <div id="fancyContent"> to class <div class="fancyContent">, because I have more than one div with id="fancyContent", so it not seems correct to use the same id many times.
Do you know if this is possible?
Here I have my script to start fancybox:
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
fitToView : false,
width : '80%',
height : '80%',
autoSize : false,
closeClick : false,
}
});
})

Remove Scroll from Specific Fancy Box [duplicate]

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.
Here are my js calls
<script type="text/javascript">
$(document).ready(function() {
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
});
</script>
<script>
$(document).ready(function()
{
$('.fancybox').fancybox(
{
padding : 0,
openEffect : 'elastic'
}
);
$(".fancybox").fancybox(
{
wrapCSS : 'fancybox-nav',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
}
);
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
And here is how I have images and video displayed within my HTML:
<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">
Do I need to add something or change anything within the .js file? What am I missing?

First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):
.fancybox-nav-video .fancybox-nav {
width: 60px;
}
.fancybox-nav-video .fancybox-nav span {
visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
left: -60px; /* move left outside fancybox area */
}
Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.
Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:
<script type="text/javascript">
$(document).ready(function() {
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
});
// fancybox for images
$(".fancybox").fancybox({
// options for images here
});
}); // ready
</script>

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();
}