I'm really new to jquery and I'm trying to learn new things with coding. I have a slider working on 5 topics that slide left to right. For each of the 5 items in that slider there is a link to a different web page internally,that i want to bring in content using the .load() method into a blank div.
Other than the pictures not working and the slider part not scrolling, here is what I'm trying to do.
Any help would be grateful, in pointing me into the right direction. Code is here
<script>
$(document).ready(function() {
$("#te").click(function(evt) {
$('#news').empty().load('ppv_ons.html #ppv');
evt.preventDefault();
}); // end click
}); // end ready
</script>
I made HTML this:
<div class="link" id="te">Find out more</div>
Into
<div class="link"><a id="te" href="ppv_wm.html" target="blank">Find out more</a></div>
And updated the jQuery to look like this:
$(document).ready(function() {
$("#te").click(function(evt) {
evt.preventDefault();
$('#news').empty().load('ppv_ons.html #ppv');
});
}); // end ready
JSFIDDLE: http://jsfiddle.net/6cuam/8/
you can get your content like
$(document).ready(function() {
$("#te").click(function(evt) {
$('#news').empty();
$('#news').load($('#ppv').html());
evt.preventDefault();
});
});
Related
I am using this plugin here for horizontal scrolling.
http://manos.malihu.gr/horizontal-page-animation-to-id-with-jquery/
Here is the demo link I have created using it. http://aijaz.co/hearing1/
The problem I am facing is, I can scroll the pages when the link to scroll is just below .content. When I put the link in several divs, the page doesn't scroll. Example:
<div>
<div>
<hr />
← Back to start Next section →
</div>
</div>
This is the script it is using.
<script>
(function($) {
$(window).load(function() {
/* Page Scroll to id fn call */
$("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
layout: "horizontal",
highlightSelector: "#navigation-menu a"
});
/* demo functions */
$("a[rel='next']").click(function(e) {
e.preventDefault();
var to = $(this).parent().parent("section").next().attr("id");
$.mPageScroll2id("scrollTo", to);
});
});
})(jQuery);
</script>
Please help me out. Thank you.
Try traversing up through the clicked element's ancestors instead of using .parent() multiple times:
$("a[rel='next']").click(function(e){
e.preventDefault();
var to=$(this).closest("section").next().attr("id");
$.mPageScroll2id("scrollTo",to);
});
You are doing wrong i guess, Use same class for every tag and try sure it will work , go through plugin document .
I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp
I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.
I'm working on a project based on one of the Codrops blueprints: http://l3s11023.zeus03.de/test/
I want to have the first submenu 'Lovely Spirits' already open when the page loads. I tried to do this with jQuery $( document ).ready(function() and a trigger event but without success.
Any help would be greatly appreciated. thanks.
Here is a fiddle with a part of your code and an example how you could trigger the click in
$(document).ready(function(){});
Make sure you include jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(document).ready(function(){
$('.cbp-hsmenu').children('li').children('a').on('click',function(){
$(this).next('ul').css('display','block');
});
/* HERE IS the interesting part*/
/* Trigger click on that function opening your sub-nav */
$('#gesu').trigger('click');
});
http://jsfiddle.net/Zms3T/
(Your question is not good. Next time please try to show only that part of code which is needed)
UPDATE THE ANSWER AFTER LOTS of trying on your site
The Code above was just an example of how you could try it. I was sure you trigger the function to open that navigation. However, replace the document ready with this: That will do what you where looking for.
$(document).ready(function(){
var elemHeight = $('.cbp-hsmenu li:first-child ul').height()
$('.cbp-hsmenubg').css('height', elemHeight+'px');
$('.cbp-hsmenu li:first-child').addClass('cbp-hsitem-open');
});
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery