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.
Related
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()"
I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.
As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.
$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?
This is my javascript function to open a jquery dialog.
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
How can I hide the part show: 'slide, from IE ?
var options = {
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
};
if ( ! $.browser.msie){
options ['show'] = 'slide';
}
$('#dialog').append(iframe).appendTo("body").dialog(options);
try this
if ( ! $.browser.msie){
$( "#dialog" ).dialog( "option", "show", "slide" )
}
jquery has removed support for jQuery.browser.msie from version >= 1.9
so
var opts = {
autoOpen : false,
modal : true,
resizable : false,
show : 'slide',
width : 800,
height : 700,
close : function() {
}
};
if (!/msie/.test(window.navigator.userAgent)) {
opts.show = 'slide';
}
('#dialog').append(iframe).appendTo("body").dialog(opts);
$('#dialog_click').click("callback", function() {
$('#dialog').dialog('open');
return false;
});
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 800,
height: 700,
close: function() {
}
});
if(!$.browser.msie) {
$( "#dialog" ).dialog( "option", "show", "slide" );
}
There are several workarounds for this (conditional comments for the whole script, altering the property later, etc) but noone has posted a solution that does EXACTLY what you asked: excluding a portion of javascript only in IE.
Then take a look at this:
('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
/*#cc_on #*/
/*#if (true)
#else #*/
show: 'slide',
/*#end #*/
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
IE won't include show: 'slide',, while non-IE browsers won't read the Conditional Compilation Statements , so the condition will fall in the (not-commented) else part.
Read more on Conditional Compilation Statements
There is several thing you can do.
First there are conditional comments , ie
<!--[if !IE ]>
<script>
$('#dialog').append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
show: 'slide',
width: 800,
height: 700,
close: function() {
}
});
$('#dialog_click').click("callback",function() {
$('#dialog').dialog('open');
return false;
});
</script>
<![endif]-->
Or you can check jquery browser variable , as other guys are pointing.
Also if you are going this way, and you really want to target old version of IE you can use some functions specific to it ( like attachEvent )
I'm using jQuery UI and I want to check if accordion is already applied to some element. In this case I will refresh it, else I will apply it. I want something like this
if (already_applied) {
$('#element').accordion('refresh');
}
else {
$('#element').accordion(
{
header: '> div > h3',
collapsible: true,
active: true,
autoHeight: false
}
);
};
This should work:
if ($('#element').hasClass('ui-accordion')) {
$('#element').accordion('refresh');
}
else {
$('#element').accordion({
header: '> div > h3',
collapsible: true,
active: true,
autoHeight: false
});
};
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" .