I am looking for a method to add a java script file to a button or image within Wordpress. The script works fine and opens a screen to be subscribed to a newsletter. But I want this screen only to appear when button or image is clicked. Is there a way to do it?
Here is the script
<!-- Laposta 1.1 -->
<script type="text/javascript">
var Laposta = {};
Laposta.width = '200';
</script>
<script type="text/javascript" src="subscribe.js"></script>
<!-- /Laposta -->
Any suggestions are greatly appreciated
Related
When I don't set the auto click script, I load the page, click on the link and go to the right URL. If I add the script to auto click, instead of redirecting me to the same URL that when I clicked, it adds the HREF to the URL where the link is, and don't take me anywhere. Anyone could help me to make the auto click behave in the same way as when I click? Thanks in advance.
Here you can see what I meant: https://rioga.webflow.io/bem-vindo
Code with Auto click on
<body><a id="redirect" href="#/ms/member-page/default" class="w-button">Button Text</a>
<div class="w-embed w-script">
<script type="text/javascript">
document.getElementById("redirect").click();
</script>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5e79526aa1d3ba459f1ebac2" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
If I understand your task correctly, it's not redirecting you cause you're using # in your link. Usually it's using like an anchor for linking to an element on the same page.
You can try:
window.location.replace("https://rioga.webflow.io/bem-vindo/ms/member-page/default"); – if you need it to work as an HTTP redirect
or
window.location.href = "https://rioga.webflow.io/bem-vindo/ms/member-page/default"; - as clicking on a link
I have a parent page with thumbnails that link to a Jquery AJAX modal, so that when someone closes the AJAX html, the user will return to the scrolled part of the parent page that they clicked on. Everything is working as far as navigation and related thumbs etc. The only problem I am running into is that when i try to share the AJAX html page, the parent is being read, and not the AJAX html page meta.
Is it possible to use some script to have the first set of meta elements skipped and the AJAX meta read? Does that make sense?
Here is the page I'm working on --> Example
HTML:
<a class="thumb {url_title}" rel="modal:open" href="/{segment_1}/{url_title}">Blah</a>
SHARE BUTTONS:
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="https://www.addtoany.com/share"><i class="far fa-share-alt"></i></a>
<script>
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.num_services = 6;
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> . </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
The problem I am having is preventing a link from launching a new page and loading its href value in an iframe. The client site is using healcode a service that provides widgets to schedule fitness classes etc.Check this page When you click the signup button after the widget loads it opens a new page. What the client wants is to open that link on the same page or in a popup window. I have tried everything I can think of. I have used jQuery,fancybox, etc.
HERE IS THE CODE IM USING
screenshot.
What I think the problem is, is that my inline scripts loads before the widget scripts finish renders the the schedule html.
I know it is possible because this site uses the same widget and their signup opens the link in a overlay frame on the same page.
Please shed some light on this.
UPDATE:
<html>
<head>
<title>Test</title>
</head>
<body>
<iframe id="openViewHere" width="500px" height="500px" src="" ></iframe>
<script type="text/javascript">
healcode_widget_id = "7696499e81";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Iyengar Yoga Association of Greater New York : Brooklyn Daily Class Schedule
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".signup_now").click(function(){
var url = $(this).attr("href");
$("#openViewHere").attr("href",url);
return false;
});
</script>
</body>
</html>
Just use this code :
$( document ).ready(function(){
$("body").on('click',".signup_now",function(e){
$(this).attr("target","_self")
})
})
be aware that windows.ready() might fire , while the widget script is still adding elements dynamicaly that is why the listeners dont work , you have to access the element through already loaded parent ( e.g "body" ).
So I've tried to find an answer but can't seem to get this one right.
I've changed my code to model (pretty much exactly) after the answer in this question:
Delay pop-up for 10 seconds, only pop up once
When I test locally, I can get it to work if I change the cookie value to a number(ex:1) instead of the string (ex: 'yes') but after putting the site online, the fancy box never shows up using either method. Tried clearing cookies and emptying cache.
Here's my code for the popup:
<!--This is for a one time popup-->
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS file -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<!--Add fancybox CSS file -->
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add jQuery cookie library -->
<script src="cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function openFancybox(){
$('.fancybox').fancybox().trigger('click');
}
$(document).ready(function(){
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
}
else {
openFancybox();
}
$.cookie('visited', 'yes' , { expires: 2 });
$('.fancybox').fancybox();
});
</script>
<!--End of popup code-->
In my html body I have:
<a class="fancybox" href="#inline1" title="Next Generation City"></a>
and
<div id="inline1" style="width:400px;display:none;">
<h3>About website.com </h3>
<p>
Here's my text for popup
</p>
</div>
I'm new to using cookies and fancy box, so I'm a little lost. Thanks so much for any help with this issue.
EDIT: also, I have a fancy box displaying correctly on another page of the site, so I'm fairly certain the issue is with the cookie part
how to refresh/reload only once after the page is loaded in jquery mobile. because am using wow slider and when it is loaded the data is getting dynamically but the ui is not correctly getting once the page is refreshed it is getting. Can someone help me for this thanks.
I found this... This works for me. May be it will work for you also. Just include this script in your 'data-role="page" div' available in your mobile jquery page.
Below is test1.html:
<body>
test <!--This link redirects to test.html but you will see 'test.html#' at address bar that means you page is reloaded once -->
</body>
test.html:
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(location.hash != 'test1.html'){
location = 'test.html#';
}
});
</script>
</body>