I have been playing around for ages with this and it does not seem to work.
I am looking to add a hidden voucher code function to my site and have it so that the code is actually hidden until the "click to reveal" button is clicked and user's browser opens a new window.
I have a test page with exactly what i'm talking about.
my trouble is, everything works but the actual voucher reveal bit.
Any ideas, or any link on how to do this?
Your page looks like you're trying to use jQuery code, but you have not added jQuery to your document, and thus are receiving errors like Uncaught ReferenceError: $ is not defined.
See jQuery: The Basics on how you can set up your page to point to jQuery properly.
As Jonathan Newmuis pointed out, your missing the jQuery lib from your code. Which that is issue one, issue two is I don't see the fancybox plugin being called in either.
so where you have this bit
<script type="text/javascript">
$(document).ready(function () {
$(".popUpCode75554").fancybox({
'overlayOpacity': 0.7,
'enableEscapeButton': false,
'hideOnOverlayClick': false,
'hideOnContentClick': false,
'showCloseButton': true,
'frameWidth': 520,
'frameHeight': 400,
'overlayColor': '#000000',
'callbackOnClose': function () {
$('.voucher-code-revealed-75554').show();
$('.voucher-buttons-75554').hide();
}
});
$(".cashbackWarning").fancybox({
'overlayOpacity': 0.7,
'enableEscapeButton': false,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'showCloseButton': true,
'frameWidth': 500,
'frameHeight': 250,
'overlayColor': '#000000'
});
});
try {
var pageTracker = _gat._getTracker("UA-11279427-1");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}
</script>
add the following above it.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
not sure how old/new that particular fancy box version is compared to the one you are attempting to use but I think it may be the newer of them. Anyway. adding those 2 lines may solve your problems unless the code you have otherwise currently is flawed somehow which doesn't appear to be the case at the moment.
On another note, if you use firefox might I suggest getting yourself an addon called firebug, it will aid you in debugging javascript based errors as well as other things.
Related
This seems like a trivial question but for some reason, I can't get an internal link to work properly.
I have 2 internal links (shown in the screenshots) on this page - https://www.top10metalbazookas.gq/products/elevar-arc-racer-us
When I click on this link it scrolls down to the correct section on the page
However, when I click on this link, nothing happens
For reference, the href attributes for both a tags have this as the ID.
#shopify-section-es-us-product-template-reviews
Is this some event propagation issue or some other kind of CSS bug or am I doing something silly here?
I've resolved this through jQuery for now. Since it's urgent. But I don't think it's the best option. If anyone has a hunch as to why the simple internal scrolling didn't work, please let me know.
This is how I did it:
function(t) {
t.preventDefault();
var e = $(this).attr('href');
$(e).trigger('click'), setTimeout(function() {
$('html,body').animate({
scrollTop: $(e).offset().top - 100
},
800,
'swing'
);
}, 300);
}
I've made a vertical menu for my webpage. I want that when i click on any item in the menu, the content open without loading other page. The previous div hides and other div comes on clicking on the menu. Can anyone help me here?
http://demo.tinywall.info/html5-history-api/menu2.php
I need something like this, but with simple HTML and CSS. I also don't need to change URL, the url will be same. Only the hidden content shows up.
This is the website where i want to put this thing -> www.techstore.tk
You can do this:
#btnLeft:active {
...
}
Then insert anything that you want to change in that.
Or if you want to have jquery in, you can do the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".category").click(function(){
$(".filter").toggle("swing");
});
});
</script>
<div class="category">Select Me</div>
<div class="filter">My hide able div</div>
Speed
milliseconds - You can do any number to define how fast it it.
"slow"
"fast"
Easing
"swing" - moves slower at the beginning/end, but faster in the middle
"linear" - moves in a constant speed
Or, you can try a slide effect like this:
$(document).ready(function(){
$(".categorie").click(function(){
$("#.filter").slideToggle("slow"); // You can add any transition in place of "slow".
});
});
Callback functions
A callback function is executed after the current effect is 100% finished. But you can call another function before the effect starts. Here are both examples:
Callback - Executes after the effect is finished:
$(".category").click(function(){
$(".filter").hide("slow", function(){
alert("The effect just finished");
});
});
Executes before the effect starts. Note: this is not called a callback:
$(".category").click(function(){
$(".filter").hide(1000);
alert("The effect will start after this message goes away");
});
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
and
jQuery('a[href*=#]').live('click',function() { ...etc...
total NOOB question:
I have these two functions in JQuery...
How do I combine them ?
a[href*=#] is a slideshow presentation and a[rel='box'] is for a colorbox to open...
one or the other works but not both together.
That is what I get for trying to "cut and paste" code...
the Jquery is loaded
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type='text/javascript' src='scripts/jquery.colorbox-min.js'></script>
in the HEAD section
I even tried to add:
jQuery(function(){
if(jQuery.isFunction(jQuery.fn.colorbox)) {
jQuery("a").live('click',function(){
jQuery(this).colorbox();
});
}
});
but this didn't work either...
This is where I got the slideshow... www.pixedelic.com/plugins/camera/ colorbox is loaded, but doesn't work on individual pictures...
Any help would be GREATLY appreciated and thanks!
The problem was defining $ in jQuery NOT an A conflict with READY and LIVE...
I think your copy of jquery.min.js is corrupted, it doesn't define $.
Your jQuery script ends with jQuery.noConflict();, that prevents defining $.
So you have to write jQuery(document).ready() instead of $(document).ready()
You can't write $.noConflict() after you already have jQuery.noConflict() in jquery.min.js.
SOLUTION:
jQuery(document).ready(function($){
$("a[rel='box']").colorbox();
});
NOT:
// cannot below use if have jQuery.noConflict(); ! use above notice large Q //
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
THANKS! Barmar!
I have some SVG lines with line markers on them, and I have a script that moves those lines around. This works fine on all browsers, including IE9.
However, I just tried it on IE10, and the line markers get left behind when the line moves.
An example of this can be seen here: http://jsfiddle.net/swYRK/8/
I have tried this on both Windows 7 and 8.
Anyone know what's going on? Is this an IE10 bug, or is there another way to move the line and markers?
(Note the actual application is very performance sensitive, so I very much want to avoid doing something like re-creating the lines every frame while I move them, or something.)
-
Edit: this seems like a real IE 10 bug. I've found one open issue in the IE bug tracker (which requires a Microsoft account to even see, which makes it not visible to Google. Hello?), which I have added information to. IE has yet to accept the issue.
If there are any other work-arounds that people can think of, that would be great to hear. Completely removing the end markers, rendering that, and then re-adding them works-ish (shows visible flashing), but would not be acceptable in my application, unfortunately.
This is a quick way of doing it, that works well.
I have not noticed any flickering or performance related issues.
Simply re-add the svg node in it's original place:
if (navigator.appVersion.indexOf("MSIE 10") != -1) {
svgNode.parentNode.insertBefore(svgNode, svgNode);
}
Of course, you could use any browser sniffing of choice..
I want to elaborate a little on the amazing answer given by #ChristianLund and how I used it successfully in my code
In my force animation, I have a tick function that looks like this:
force.on("tick", function() {
...
});
I also hold all of my graph links inside the link variable, defined like so:
var link = svg.selectAll(".link").data(links).enter() ...
Now, to implement the magic suggested by Christian, I've added this line in the beginning of my tick function:
force.on("tick", function() {
link.each(function() {this.parentNode.insertBefore(this, this); });
...
});
This seems to fix the IE 10 problems... of course it's recommended to add this patch only on IE 10
In ie10/11, I found that the line does not move when it with marker-start/marker-end atrribute, I tried to remove those atrributes in your example, and it works. So the idea is remove the atrributes before set the x/y, then reset the atrributes after all jobs done.
You may try this hack:
$("#button4").click(function () {
$("#line1")[0].setAttributeNS(null, "x1", 50);
$("#line1")[0].setAttributeNS(null, "y1", 50);
$("#line1")[0].setAttributeNS(null, "x2", 150);
$("#line1")[0].setAttributeNS(null, "y2", 50);
var oldAttValueDisplay = $("#line1")[0].getAttributeNS(null, "display");
$("#line1")[0].setAttributeNS(null, "display", "none");
setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", oldAttValueDisplay);}, 0);
// static: setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", "block");}, 0);
});
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});