first post here at this great website!
I would like to reduce the amount of code for the following, espacially as there are more parts I need to add in the future - I'm sure there must be an easy way but I'm just not seeing it. Thanks for your help!
$(document).ready(function(){
$(function(){
$('#iqdrive').click(
function(){
$('#iqdrive-cont').show();
});
});
$(function(){
$('#optiwave').click(
function(){
$('#optiwave-cont').show();
});
});
$(function(){
$('#vario').click(
function(){
$('#vario-cont').show();
});
});
$(function(){
$('#autostain').click(
function(){
$('#autostain-cont').show();
});
});
$(function(){
$('#autoload').click(
function(){
$('#autoload-cont').show();
});
});
});
Firstly, you don't need to nest document.ready functions (all the $(function() { are redundant as it is equivalent to document.ready). And to simplify your code:
$(function() {
$('#iqdrive, #optiwave, #vario, #autostain, #autoload').click(function() {
$('#' + this.id + '-cont').show();
});
});
All of the internal $(function()) calls are unnecessary, since $(function()) is an alias for $(document).ready(function()). Your example shows a lot of repetition of the same sort of task; that's very easy to consolidate.
$(document).ready(function(){
$('#iqdrive, #optiwave, #vario, #autostain, #autoload').click(function(){
$($(this).attr("id") + "-cont").show();
});
});
What that does is register for clicks on elements with any of those IDs, and on click, gets the ID of the clicked element, appends -cont, and uses that as a selector to get a set of elements to show.
Related
So this little script was working exactly how i wanted it to but i did something to mess it up, basically i have one jQuery function
function loadDiv(id, page) {
$(function () {
$("#" + id).load(page);
});
}
and then this HTML (obviously through a for loop)
Edit this Post -->
I have tried removing "javascript:" I actually tried that because I could think of nothing else wrong.
I'm not sure but I don't think you need the extra jQuery wrapper.
function loadDiv(id, page) {
$(function () { // what is this line for?
$("#" + id).load(page);
});
}
I would just keep:
function loadDiv(id, page) {
$("#" + id).load(page);
});
I would write your links like so
Edit this Post
Then write your function like so
$('body').on('click', '.loadTrigger', function(){
var id = $(this).attr('data-id');
var page = $(this).attr('data-page');
$("#" + id).load(page);
});
I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});
so I just started making a webpage for a change and I want to animate some buttons and so on. So what i want to do is write a function wich takes an object (in this case an ) and declares functions for the hover-event. The function works totaly fine in this (not usefull) version:
function hoverOver() {
$(document).ready(function(){
$("#FormA").hover(function(){
$("#ButtonA").animate({marginLeft:"5px", opacity:"1"}, "fast");
}, function(){
$("#ButtonA").animate({marginLeft:"0px", opacity:"0.5"}, "fast");
});
});
But in order to use the function on multiple Buttons, I want to write it like this:
function hoverOver(source) {
$(document).ready(function(){
source.parent().hover(function(){
source.animate({marginLeft:"5px", opacity:"1"}, "fast");
}, function(){
source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
});
});
}
// this is how I want to call the function with multiple Buttons
hoverOver($("#ButtonA"));
I also tought that it would work if I pass the source-variable through all the functions like this:
function hoverOver(source) {
$(document).ready(function(source){ // <-- here
source.parent().hover(function(source){ // <-- here
source.animate({marginLeft:"5px", opacity:"1"}, "fast");
}, function(source){ // <-- and here
source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
});
});
}
// this is how I want to call the function with multiple Buttons
hoverOver($("#ButtonA"));
So where is my problem? I know this way of coding JS is not the best way and specialy with JS, HTML and CSS there are million ways to do it but I realy started like 4 days ago. ;)
Thanks
If you use jQuery you might as well extend its prototype, like this:
$.fn.hoverOver = function(){
this.each(function(){
var $this = $(this);
$this.parent().hover(function(){
$this.animate({marginLeft:"5px", opacity:"1"}, "fast");
}, function(){
$this.animate({marginLeft:"0", opacity:"0.5"}, "fast");
});
});
}
And then bind it to any element like this;
$("#buttonA").hoverOver();
or this:
$(".buttonHover").hoverOver();
I have this html form
<form action="upload/" id="upload" name="upload">
// other form data
</form>
and this in html on page where i can switch form attributes
Download
Upload
and my javascript
$("#startUpload").click(function( {
$("form").attr('action','upload/').attr('id','upload');
});
$("#startDownload").click(function( {
$("form").attr('action','download/').attr('id','download');
});
$(function() {
$('#upload').uploadThis({
// other code here
});
$(function() {
$('#download').downloadThis({
// other code here
});
my problem is when i click on href #startUpload this is attached with $('#upload').uploadThis({}) function and it works but when i click on #startDownload it is not attaching this $('#upload').downloadThis({}) function and not getting called.
thanks for any help.
I'm not sure exactly what is the wanted behavior but changing IDs of elements always brings the same sort of issues.
You are doing this:
$(function() {
$('#upload').uploadThis({
// other code here
});
});
$(function() {
$('#download').downloadThis({
// other code here
});
});
$(<Function>); is a shorthand for $(document).ready(<Function>);
The thing is that when you're document is ready, it will execute both your handlers above but at that time, only an element with ID #upload exists, $('#download') will actually be an empty selection.
What you could do is call $('#upload').uploadThis() and $('#download').downloadThis() in your respective .click() handlers after changing the IDs.
$("#startUpload").click(function( {
$("form")
.attr({ 'action': 'upload/', 'id': 'upload' })
.uploadThis(...);
});
Note: if those are plugins you wrote yourself, be sure that they won't initialize each time you call them.
Hope I'm clear enough :o)
You can do this as many times as you like:
$("#startDownload").bind('click', function() {
...
});
You are trying to bind elements before they exist on DOM... will never work.
$("#startUpload").click(function( {
$("form").attr('action','upload/').attr('id','upload').submit(function() {
$(this).uploadThis({
//other code here
});
);
});
$("#startDownload").click(function( {
$("form").attr('action','download/').attr('id','download').submit(function() {
$(this).downloadThis({
//other code here
});
);
});
THis way you will bind the action you want in the submit form event. Probably will fix your problem.
A simple approach would be to make custom events for the form and trigger them by the onclick's:
$("#startUpload").click(function( {
$("form").trigger('upload');
});
$("#startDownload").click(function( {
$("form").trigger('download');
});
$("form").bind('upload',function(){
$(this).attr('action','upload/').uploadThis();
}).bind('download',function(){
$(this).attr('action','download/').downloadThis();
});
I don't understand why livequery doesn't bind the event, but I have to use .click.
This is just an example, which might also use the .click(), but in the real code I'm forced to use livequery.
Does anyone know why livequery isn't working?
function bind_remove(comment){
var id = comment.attr('comment_id');
comment.find(".remove").livequery("click", function(e){
$.post("/deleteComment", {id: id}, function(response){
comment.remove();
comments = comments_container.find('.comment');
});
});
}
$(document).ready(function(){
var comments_container = $('#comments_container');
var comments = comments_container.find('.comment');
comments.each(function(){
bind_remove($(this));
});
$(".submit_button").livequery("click", function(e){
$.post("/newComment", {text: textarea.val()}, function(response){
comments_container.last().append($(response).fadeIn('slow',function(){
comments = comments_container.find('.comment');
bind_remove(comments.last());
}));
});
});
});
Try replacing
comment.find(".remove").livequery("click", function(e){
with this
comment.find(".remove").live("click", function(e){
I added a random id to the last comment, then I selected it with $('#myid'), not using 'last()'. Then I bind it and started to work