I am currently using this script to warn the user they are leaving the current webiste when clicking on an external link on a WordPress website:
<script>
jQuery(function() {
function leave_now(event) {
var choice = window.confirm( 'Leave page?' );
return choice;
}
var select_external = 'a[href*="//"]:not([href*="yourdomain.com"])';
jQuery(document).on( 'click', select_external, leave_now )
});
</script>
It works great, but I actually need to modify this so it takes them to a warning PAGE instead of having a popup window appear. After the warning page is loaded, it waits 5 seconds, then loads the URL that was clicked on.
Any suggestions would be appreciated.
Set the location.href which will navigate you to the url you specify
location.href='http://www.your-url.com'
So, on click, you could have that function run and set that location instead of do a warning
Related
I have a site that I took over that includes Blue imp galleries but they have stopped working - when you click on the thumbnail link the screen just becomes black without any images and you need to refresh to view the page again.
Here is a link to the page that contains the galleries: https://www.secrethillswalking.co.uk/holiday/746/1240/a-yorkshire-treat---hebden-bridge.htm
What code do I need to remove/add to get both the galleries showing the larger images properly again?
I have tried just replacing jquery.blueimp-gallery.min.js with the new version but this did not work.
Thanks in advance!
I took a look at your page's source code and I think you're missing the javascript to bring blueimp into play for the PHOTO GALLERY section. This is what I use:
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
where 'links' is the id of your gallery div.
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
I've created a google content experiment without redirects using the docs.
The basic implementation involves a javascript snippet that uses the following code to choose the version of the experiment:
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
</script>
<!-- Load the JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
function() {}, // Original: Do nothing. This will render the default HTML.
function() { // Variation 1: Banner Image
document.getElementById('banner').src = 'bay-bridge.jpg';
},
function() { // Variation 2: Sub-heading Text
document.getElementById('heading').innerHTML = 'Look, a Bridge!';
},
function() { // Variation 3: Button Text
document.getElementById('button').innerHTML = 'Learn more';
},
function() { // Variation 4: Button Color
document.getElementById('button').className = 'button button-blue';
}
];
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(
// Execute the chosen view
pageVariations[chosenVariation]
);
</script>
However, when I visit the page using an incognito window, I only see the first variation of the experiment. When I check chosenVariation in the console, it's always 0. In fact, when I call cxApi.chooseVariation(); in the console, it always returns 0.
Is this because google recognizes my incognito browser windows, or is something broken with cxApi.chooseVariation(); or in my implementation?
I had the same problem, 100% of the sessions were given the original (0) variation. In order to fix the problem, I added the javascript code provided by the experiment. Go to your experiment (edit), click Setting up your experiment code, manually insert the code, copy the code in there.
Now since you (and I) don't want to have a redirect, remove this part at the end of the code <script>utmx('url','A/B');</script>. If your page is templated, you can use a variable and insert your experiment key (not experiment id) where you see var k='########-#'
Now either very few people use the experiments in a client-only fashion or we're totally stupid because it would seem to me that the guide is wrong and there's absolutely no documentation that shows a working client-only setup.
Would modify the action of Contact Form 7 once sent the mail.
I follow this post and woks fine. But my fom is in a Bootstrap Modal, and I wish they would keep open on submit.
My code is.
In function PHP
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url'); function wpcf7_custom_form_action_url() { return 'http://saviacomunicacion.com.ar/test2014#sala-de-prensa'; }
And in the Aditional Settings field
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
This redirect the URL, but it´s not sending the mail.
I wish i could send the mail and keep the modal open to show the response: Your mail was send correctly.
Thanks
According to the doc there is another way to accomplish the redirect. Just add some piece of code to the plugin dashboard.
Or you can do custom js function
in the plugin options
on_sent_ok: "customFunction();"
and somewhere in the code
<script>
function customFunction() {
// show your modal here
$('#myModal').modal();
}
</script>
I found my solution with this code. When form submit, the Modal closes after 1 second.
Instead of keeping Modal open, i wait 1 second after close, to show the response of the sending.
j(".form-horizontal").live("submit", function(){
j.post(this.action, j(this).serialize(), function(){
//this callback is executed upon success full form submission close modal here
}, "script");
//this is to wait 1 second until close
setTimeout(function() {j('.modal').modal('hide');}, 1000);
return false;
});
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});