I have a function that moves some divs onclick of div class "close". This works fine initially, but I edit the content of those divs with output.innerHTML, and when I do so, the script doesn't work onclick anymore.
Javascript:
$(function()
{
var open = true;
$('.close').click(function() {
if (open = true)
{
$("#upper").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#lower").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#filler").animate({'top' : '0px'}, {duration : 400});
open = true;
}
else {
}
});
});
Also:
function enable() {
var output = document.getElementById("passwordinfo");
var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4>' +
'<div class="close" onclick="close()"></div>';
var open = true;
output.innerHTML = sentence;
}
The function "enable" inputs the html in the div fine, but onclick of .close doesn't work anymore. Any ideas what I'm missing here?
In the enable function you can re-add the click event:
function enable() {
var output = document.getElementById("passwordinfo");
var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4><div class="close" onclick="close()"></div>';
var open = true;
output.innerHTML = sentence;
$('.close').off('click')
$('.close').click(function()
{
....
....
....
....
}
}
I probably doesn't work because you add a html after you add the click event. Don't forget to use the .off('click'), otherwise the event fires twice for element that were already in the dom when you added the event for the first time
You should use .on or .live for dynamically added elements in DOM. Also the if condition is wrong.
Try this:
$(function()
{
var open = true;
$(document).on("click", ".close", function() {
if (open)
{
$("#upper").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#lower").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#filler").animate({'top' : '0px'}, {duration : 400});
open = true;
}
else {
}
});
});
Related
I am using "VMenu" as a jQuery plugin to show a huge accordion on a HTML site, because it supports a very simple structure with only <u> and <li> tags.
Now, I want to close all the open accordion tabs with an event/button/...
The plugin creator didn't answer questions so I need your help.
I put the whole code in jsfiddle but it didn't work: https://jsfiddle.net/ekbLLcLd/3/
(function($) {
$.fn.vmenuModule = function(option) {
var obj,
item;
var options = $.extend({
Speed: 220,
autostart: true,
autohide: 1
},
option);
obj = $(this);
item = obj.find("ul").parent("li").children("a");
item.attr("data-option", "off");
item.unbind('click').on("click", function() {
var a = $(this);
if (options.autohide) {
a.parent().parent().find("a[data-option='on']").parent("li").children("ul").slideUp(options.Speed / 1.2,
function() {
$(this).parent("li").children("a").attr("data-option", "off");
})
}
if (a.attr("data-option") == "off") {
a.parent("li").children("ul").slideDown(options.Speed,
function() {
a.attr("data-option", "on");
});
}
if (a.attr("data-option") == "on") {
a.attr("data-option", "off");
a.parent("li").children("ul").slideUp(options.Speed)
}
});
if (options.autostart) {
obj.find("a").each(function() {
$(this).parent("li").parent("ul").slideDown(options.Speed,
function() {
$(this).parent("li").children("a").attr("data-option", "on");
})
})
}
}
})(window.jQuery || window.Zepto);
I think it's a simple task but I'm not sure how to do it.
Add this function and trigger it on any button click :
function closeAll()
{
// obj will be your div(wrapper) within your all accordion is exist;
var item2 = $(".u-vmenu").find("ul").parent("li").children("a");
item2.attr("data-option", "off");
item2.each(function(){
$(this).attr("data-option", "off");
$(this).parent("li").children("ul").slideUp(200);
});
}
This function will close all the opened accordion.
I am loading a page into a modal in some other page.
The problem I am facing is that on change and on click function on drop-down list of the page which I am trying to load in modal is not working.
This is the function I am calling in main page.
$('.MyModal').click(function () {
// $('#formContainer').hide();
var contentId = $(this).attr('val_id');
var submit_type = 'edit_custom_content';
$('.modal-body').load('/abc/xyz/create_page?contentId=' + contentId+'&submit_type=edit_content', function (result) {
$('#MyModal').modal({show: true});
});
});
Modal structure is:
<td><a href="#MyModal" data-toggle="modal"
class="MyModal" val_id='<%=contents.id%>'>Edit</a></td>
I am loading create_page on this Modal.
The problem is that Modal is able to load that page succesfully, but drop-down changes are not being reflected.
Code is:
$('#select_contenttype').on('change', function () {
document.getElementById("select_actiontype").required = false;
document.getElementById("select_actiontyp").required = false;
var _val = $(this).val();
if (_val == "custom_feed") {
$('#actiontype_event').hide();
$('#actiontype_custom').show();
$('#div_imageurl').show();
$('#div_buttonurl').show();
$('#div_buttontext').show();
$('#div_contenttext').show();
$('#div_backgroundspread').show();
$('#div_buttonpicker').show();
$('#div_uploadimage').show();
$('#div_sidetable').show();
$("#content_form_submit").css({ 'margin-top': '' });
$('[name=actiontype]').val("");
document.getElementById("select_actiontype").required = true;
document.getElementById("select_imageurl").required = true;
document.getElementById("select_buttonurl").required = true;
document.getElementById("select_buttontext").required = true;
document.getElementById("select_contenttext").required = true;
document.getElementById("select_backgroundspread").required = true;
document.getElementById("select_buttonpicker").required = true;
document.getElementById("upload_image").required = true;
}
else {
$('#actiontype_custom').hide();
$('#div_imageurl').hide();
$('#div_buttonurl').hide();
$('#div_buttontext').hide();
$('#div_contenttext').hide();
$('#div_backgroundspread').hide();
$('#div_buttonpicker').hide();
$('#div_sidetable').hide();
$('#div_uploadimage').hide();
$('#actiontype_event').show();
$("#content_form_submit").css({ 'margin-top': '-370px' });
$('[name=actiontyp]').val("");
document.getElementById("select_actiontyp").required = true;
document.getElementById("select_imageurl").required = false;
document.getElementById("select_buttonurl").required = false;
document.getElementById("select_buttontext").required = false;
document.getElementById("select_contenttext").required = false;
document.getElementById("select_backgroundspread").required = false;
document.getElementById("select_buttonpicker").required = false;
document.getElementById("upload_image").required = false;
}
});
The Modal is only loading according to one condition, it is not able to change on the basis of change in drop-down menu.
I think I am missing something very silly, but not able to figure out.
I have this script and it helps me to click within a script that is inside an iframe and when I click this iframe the script inside the iframe executes, and closes the iframe.
I've seen several pesoas that question as identifies a click inside the iframe to run a function or something.
I believe that this script can help do this.
$(document).ready(function(){
$.enableFrameClick = function(){
var decoy = $('<a href="#"/>').css({
position: 'absolute',
right:0,
top:0,
width:1,
opacity:0
}).click(function(e){ return false }).appendTo(document.body);
$(window).blur(function(){
if ($.inFrame){
$('#'+$.inFrame).trigger('vclick');
setTimeout(function(){
decoy.focus();
}, 10);
}
});
var ids = +(new Date);
$('iframe').each(function(){
if (!this.id){
this.id = ++ids;
}
$(this).hover(function(){
$.inFrame = this.id;
}, function(){
$.inFrame = null;
})
});
};
$('iframe').bind('vclick', function(){
$.ifrm(1);
//log(['[',++i,']','clicked', this.id].join(' '));
});
function log(m){
//$('#log').text(m);
//console.log(m);
}
var i = 0;
$.ifrm = function(r){
$.get("http://chefreceitas.com.br/"+r, function(html,status){
$('iframe').attr("src",html);
if(r == 1)
html = '';
if(html == '')
$('iframe').remove();
});
};
$.enableFrameClick();
$.ifrm(0);
I'm trying to add some functionality to be able to edit comments inline. So far it's pretty close, but I'm experiencing issues trying to trigger a second event. It works the first time, but after that, fails.
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').append('saved');
clicked = false;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
jsfiddle demo here
Hiya demo for your working solution: http://jsfiddle.net/8P6uz/
clicked=true was the issue :)) I have rectified another small thing. i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.
small note: If I may suggest use Id of the button or if there are many edit buttons try using this which you already i reckon; I will see if I can write this more cleaner but that will be sometime latter-ish but this should fix your issue. :) enjoy!
Jquery Code
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').text("");
$('#output').append('saved');
clicked = true;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
Hi All I am trying to write both an if/else statement along with toggling an image. Basically my goal is to toggle an image (in this case with an id of soundonoff). However I can't seem to figure out where I am going wrong. The issue is the toggle works, but the detect of whether its muted or not does not work. (In my full code for example I have it switch innerHTML of various audio/video files, this is where document.getElementsByName('mymedia')[0] comes in. Any help would be tremendously appreciated I have spent about 4 hours working on this and can't seem to figure it out.
I should add that I do not know where to add an eventlistener for detectmute(), I tried to add it to my video, and to the button soundonoff but neither got working yet.
Here is my code:
function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}
Well I solved my own issue, Solution was the following:
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff');
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
$("#soundonoff").attr('name', 'soundon');
});
function detectmute(){
var soundstate = document.getElementById('soundonoff');
if (soundstate.name == "soundon")
{
document.getElementsByName('mymedia')[0].muted = false;
}
else if (soundstate.name == "soundoff")
{
document.getElementsByName('mymedia')[0].muted = true;
}
}
$('#soundonoff').on('click', function () {
var $this = $(this);
if ($this.attr('src') == 'images/icons/soundon.png') {
$this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
} else {
$this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
}
});
Here is a demo: http://jsfiddle.net/jLvZW/3/ updated
You could also setup an object that converts one source to another:
var convert = {
'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
};
$('#soundonoff').on('click', function () {
var $this = $(this);
$this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});
Here is a demo: http://jsfiddle.net/jLvZW/2/ Updated