I have written the following code in my project
$('[data-fancybox]').fancybox({
// Options will go here
infobar: false,
buttons : [
"zoom",
"slideShow",
//"fullScreen",
//"download",
"thumbs",
"close"
],
wheel : false,
transitionEffect: "slide",
// thumbs: false,
// hash : false,
// keyboard : true,
toolbar: true,
// animationEffect : false,
// arrows : true,
clickContent: false,
afterLoad: function() {
if (!$('.fancybox-button--play').hasClass("fancybox-button--pause")) {
$('.fancybox-button--play').trigger('click');
}
}
});
That code is not executing... however, When I execute it in console it perfectly works... What I am doing wrong?
Please try to load your script under "$( document ).ready()"
Related
I work with TinyMCE and it surrounds my text with a <p> tag.
I tried using this: forced_root_block : "" following this: How can I remove p tags that are auto added within tinymce
and this isn't working for me :X
I saw this post too:
remove the extra p tag in tinyMCE
and added:
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false
and this isn't helping.
This is my current code part:
<script type="text/javascript">
tinymce.init({
selector: ".mytextarea",
plugins: "paste",
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: "all",
forced_root_block : "",
force_br_newlines : true, // tried with and without
force_p_newlines : false // tried with and without
//paste_remove_spans : true
});
</script>
you need to add the following line to your init statement
forced_root_block :false
<script type="text/javascript">
tinymce.init({
selector: ".mytextarea",
plugins: "paste",
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: "all",
forced_root_block : false,
force_br_newlines : true, // tried with and without
force_p_newlines : false // tried with and without
//paste_remove_spans : true
});
</script>
if this not work than try change in "tiny_mce.js" and not in "tiny_mce_src.js"
Have a look at the site below, will delete it later:-
[Career page][1]
On this page, if I come from other website like Facebook/ Linked in, it should look like this:-
![Image 1][2]
And If I visit from the same site, it should be like below:-
here is my JS code related to that. Please suggest what to do:-
function pageLoad() {
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
$("a#various15").fancybox({
'width': 720,
'height': 390,
'autoScale': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'type': 'iframe',
'speedIn': 600,
'speedOut': 400,
'overlayShow': true,
'overlayOpacity': 0.8,
'overlayColor': '#000',
'padding': '0px',
'onComplete': function () { $('.closer').click(function () { parent.$.fancybox.close(); }) }
});
}
Please suggest what to do
if (document.referrer.indexOf('facebook.com') > -1) {
// do something for visitors from facebook here
}
You can use document.referrer. Here is a contrived example:
$(document).ready(function() {
var referrer = document.referrer;
if(referrer.match(/stackoverflow.com/i)){ // change this to the name of your site
$('#targetDiv').show(); // change this line as needed for you actual page
}
else{
$('#targetDiv2').show(); // remove this line for you actual page
// $('.ui-accordion-header').eq(0).click(); // uncomment this line for your actual page
}
});
.none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDiv" class="none">You see this, so you came from SO</div>
<div id="targetDiv2" class="none">You see this, so you came from a site other than SO</div>
You just have to check if referrer is from fb || li and open accordion number 1 I guess:
if( document.referer ){
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: 1
} else {
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
}
Can you please change the following of your code:
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
with the following (of which host check taken from here):
if( document.referrer.indexOf(location.protocol + "//" + location.host) === 0){
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: false
});
} else{
$("#careerdiv").accordion({
collapsible: true,
autoHeight: false,
active: 0
});
}
which checks if the referrer is you own host and activates the first accordion which has the index 0 (in zero based index). Remember to test it on the server.
I'm currently using Owl Carousel and populating via AJAX. When I use the addItem method Owl Carousel goes to the first item, but I want the carousel to go to the item that was added. So to get that I used jump to, but the problem here is the carousel goes to first and then jumps to added item. I just need the carousel to go to latest item.
i had the same issue so i used lazyLoad : true,
I resolved it using this code below:
var itemBlock ='<div> slider item </div>'; \\ add your code in ajax
$('#owl-slider').html(itemBlock).trigger('create');
$("#owl-slider").owlCarousel({
// Most important owl features
ltr:true,
items : 5,
itemsCustom : false,
itemsDesktop : [1199,8],
itemsDesktopSmall : [980,5],
itemsTablet: [768,4],
itemsTabletSmall: false,
itemsMobile : [479,2],
singleItem : false,
itemsScaleUp : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : false,
stopOnHover : false,
// Navigation
navigation : false,
navigationText : ["prev","next"],
rewindNav : true,
scrollPerPage : false,
//Pagination
pagination : false,
paginationNumbers: false,
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load
lazyLoad : true,
lazyFollow : true,
lazyEffect : "fade",
//Auto height
autoHeight : false,
//JSON
jsonPath : false,
jsonSuccess : false,
//Mouse Events
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
//Transitions
transitionStyle : false,
// Other
addClassActive : false,
activeClass:true,
//Callbacks
beforeUpdate : false,
afterUpdate : false,
beforeInit: false,
afterInit: false,
beforeMove: false,
afterMove: false,
afterAction: false,
startDragging : false,
afterLazyLoad : false
});
var owls = $("#owl-slider").data('owlCarousel');
owls.goTo($('.item').length);
By stepping through the execution of addItem() I've noticed that the entire carousel is "destroyed" first then rebuilt with the new item added. So for now there is no real solution to your problem.
If you wish to jump to the latest item while keeping the sliding animation (not starting from the first then whoosh to the last), try jumpTo() to the second last item, set a timeout of like 10 milliseconds (will not work if omitted in my case), then call next().
owl.jumpTo(/*second last item index*/);
setTimeout(function() {
owl.next();
}, 10);
This is my JavaScript file code and I want to comment some html tag please suggest me how can I Comment to this html code.
This is sample code of JavaScript I want to comment One div
I have tried //, i have tried <\!--..--> i have tried /\*..*/ and it does not work.
(function ($) {
$.prettyPhoto = {
version: '3.1.2'
};
$.fn.prettyPhoto = function (pp_settings) {
pp_settings = jQuery.extend({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
opacity: 0.80,
show_title: true,
allow_resize: true,
default_width: 500,
default_height: 344,
counter_separator_label: '/',
theme: 'pp_default',
horizontal_padding: 20,
hideflash: false,
wmode: 'opaque',
autoplay: true,
modal: false,
deeplinking: true,
overlay_gallery: true,
keyboard_shortcuts: true,
changepicturecallback: function () {},
callback: function () {},
ie6_fallback: true,
markup: '<div class="pp_pic_holder"><div class="ppt"> </div><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content_container"><div class="pp_left"><div class="pp_right"><div class="pp_content"><div class="pp_loaderIcon"></div><div class="pp_fade">Expand<div class="pp_hoverContainer"><a class="pp_next" href="#">next</a><a class="pp_previous" href="#">previous</a></div><div id="pp_full_res"></div><div class="pp_details"><div class="pp_nav">Previous<p class="currentTextHolder">0/0</p>Next</div><p class="pp_description"></p>{pp_social}<a class="pp_close" href="#">Close</a></div></div></div></div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div>*
For Div Tag you have to use <\!-- Div and Content --\>
Like this:
<!--
<\!--<div> Content </div> --\>
-->
I have a question about my slideshow, i want it to play automatically, how to do it???
i've already changed the autoplay setting from false to true, but still cant.
here is my code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: true,
transitionType:'move',
globalCaption: true
});
});
</script>
and here is my link if you need to read the jquery file
My Slider problem link
THANKS
Try this,
autoPlay: {
enabled: true,
delay: 1500
}
Change the delay according to your requirement.
Or just try,
autoPlay : {
enabled : true
}
AutoPlay property requires an object not true\flase value, look at doc
Try this code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: {
// autoplay options go gere
enabled: true,
pauseOnHover: true
}
});
});
Edit: "}" was missing after " pauseOnHover: true" .