I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:
http://oxfordandregentstreet.com/
Now this is the code I made for it:
On the header I put this function
enter code here
On the header I put this function
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(){
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(){
jQuery(".vid1").hide();
});
});
</script>
enter code here
CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}
.videos{
position: relative;
display: none;
}
.play1{
position: relative;
bottom: 9em;
left: 8em;
}
enter code here
HTML code on the page:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<table border="0" align="center">
<tbody><tr>
<td><img src="/wp-content/uploads/2015/02/Constant-Contact- 290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt="" width="" class="play1"></td>
</tr>
</tbody></table></div>
<div class="videos">
<div class="vid1">Close X<iframe width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw" frameborder="0" allowfullscreen></iframe></div>
</div>
I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.
Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.
Thanks in advance :)
There's a few issues I can see:
CSS
Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:
.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
position: absolute;
bottom: -1.5em;
left: .3em;
display: none; /* added here */
}
Code
The play button class is play1 so, your code to show vid1 should be:
jQuery(".play1").click(function (e) {
e.preventDefault();
jQuery(".vid1").show();
});
The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:
jQuery(".vid1 .closevid").click(function (e) {
e.preventDefault();
jQuery(".vid1").hide();
});
Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(e){
e.preventDefault();
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(e){
e.preventDefault();
jQuery(".vid1").hide();
});
});
</script>
(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Ref: http://learn.jquery.com/about-jquery/how-jquery-works/
(2) Inside the jQuery document.ready wrapper, put an alert.
<script type="text/javascript">
jQuery(document).ready(function(){
alert("It works");
});
</script>
If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.
Make just that one thing work, then add back in the other parts, bit by bit.
Related
I am trying to get a gif that I have to fade out after the page loads, but I'm not having much luck.
I want the overlay, which has a white background and the gif, to fade into transparency after everything else on the page is loaded and ready to be seen.
Below is my code, and also a link to a page where I've been testing it:
Link to test code
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!
<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
And the CSS:
#overlay {
background-color: white;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
You use multiple versions of jQuery. If you either delete the include for jQuery 3, or make the following change, it will work.
I recently contributed to document-ready handlers in the SO:Docs which applies here and I think many will not realize as they switch to jQuery 3.
jQuery(function($) {
// Run when document is ready
// $ (first argument) will be internal reference to jQuery
// Never rely on $ being a reference to jQuery in the global namespace
});
All other document-ready handlers are deprecated in jQuery 3.0.
Using that doc-ready handler will work even if you leave both jQuery includes in the code.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
I would like to make my own custom Coinbase payment button and have the following code which is just a copy paste of "Using Your Own Button And Custom Javascript Events" example.
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="none"></div><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.my-custom-link').click(function(){
$(document).trigger('coinbase_show_modal', '4d4b84bbad4508b64b61d372ea394dad');
return false;
});
$(document).on('coinbase_payment_complete', function(event, code){
console.log("Payment completed for button "+code);
window.location = "/confirmation.html";
});
});
</script>
</body>
</html>
However it does not work. Any ideas why?
'Show Me The Modal!' link is displayed. The $('.my-custom-link').click() function is called. Using Google Chrome I can see that an iframe is loaded with what I assume is the modal dialog code containing payment instructions. However nothing happens when I click on the 'Show Me The Modal!' link.
I think I have solved it. I tried it out with your code and it does not work as you said. I took the time to modify it a little bit and it works now. http://pastie.org/8687468 Please let me know if what I fixed was intended.
The code isn't working because coinbase.com blocks custom buttons from working after triggering them with custom scripts too much
Ask a friend to test your code, it should work for other people.
I'm having the same issue. Deleting browser cookies, cache, flash cookies, changing IP doesn't work. I guess the only solutions are:
wait for the ban from coinbase.com to expire
contact support about it
don't do anything, it's working, but not for you
Update:
A working solution/hack that I found was using the default button, hiding it with opacity: 0; and putting it on top of your custom button. That way you can make it look like the user is clicking the custom button, when in fact, he's clicking the hidden default button (which works).
Here's a demo: http://jsfiddle.net/uaMdX/show
Code demo: http://jsfiddle.net/uaMdX/
<a href='#' class='my-custom-link'>Show Me The Modal!</a>
<div class="coinbase-button" data-code="4d4b84bbad4508b64b61d372ea394dad" data-button-style="small"></div>
<script src="https://coinbase.com/assets/button.js"></script>
<style>
#coinbase_button_iframe_4d4b84bbad4508b64b61d372ea394dad {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 140px!important;
height: 18px!important;
margin-left: 7px;
margin-top: 10px;
/*
debugging_code: uncomment_to_show_the_button;
opacity: 0.5;
outline: 1px solid red;
*/
}
</style>
*If your needs are more specific you should use jQuery to dynamically add the styles/position the iframe for the hidden button.
Try creating another page, and put only what coinbase gives you. If that works then it is probably a Issue on your side. If not, let me know.
I have just installed perfect scroll, the jQuery plugin, and it works great but I can't find a parameter to start the content at the bottom of my div. I want to have to scroll up on page load, not to have to scroll down.
Normally with jQuery I would just do:
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
But that seems to have no effect.
Current code:
$(".chat_person").click(function ()
{
if (!$(".chat_content_wrap").is(":visible"))
{
$(".chat_content_wrap").fadeIn(300, function ()
{
$('#message_list').perfectScrollbar('update');
$(nav_message_list).prop({ scrollTop: $(nav_message_list).prop("scrollHeight")});
});
}
});
$("#message_list").perfectScrollbar();
I haven't used the plugin before but based on the docs at https://github.com/noraesae/perfect-scrollbar
The code you should need is:
$("#message_list").scrollTop( $( "#message_list" ).prop( "scrollHeight" ) );
$("#message_list").perfectScrollbar('update');
The $ selectors may be wrong since I can't see you HTML code.
Scrooltop
paste below JavaScript code just before </head> code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
paste below JavaScript code just <body> code.
<div class="scrool">
<script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<img src="http://static.tumblr.com/cqpvki8/7yWlh05zn/seta.png" title="Go to Top" alt="Go to Top"/>
</div>
Now on the Customize page, Go and Hit the button “Edit HTML” and add below css codes just before
#scrollToTop:link,
#scrollToTop:visited {
display: none;
position: fixed;
top: 20px;
right: 20px;
}
For reference http://www.tumblings.net/post/38379026809/scrolltotopbuttoncode
Use this code
I was trying to test out some working code from http://dev.iceburg.net/jquery/jqModal/ to get an idea of how this works, but I am unable to get the code to work. I'm trying to use the pop up dialog box part, and I am testing the code from the defaults, which is the first example, in the examples section. here is what I had copied and tried testing out. the part that is not working is the dialog box popping up. i receive an error say.... Uncaught ReferenceError: $ is not defined
<html>
<head>
<title> test </title>
<style type = "text/css">
.jqmWindow {
display:none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
# html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<script type = "text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
</head>
<body>
view
...
<div class="jqmWindow" id="dialog">
Close
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the documentation too!
<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>
If your code is indeed your entire HTML, then the reason $ is not defined is that you have not included jQuery (which defines $ and uses it a lot as shorthand). Your code includes neither the jQuery library nor the jqModal script. (Admittedly all of the examples on the jqModal site are extracts rather than full code so they take this step for granted.)
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jqModal.js"></script>
in your <head>, adjusting the path for jQModal.js as appropriate.