i have a function that creates an album and with jquery's post function and then it create the necessary HTML elements and append them to the document.
the problem is that the elements are a link and its target, while the link woks fine when i refresh the page it seems like the browser couldn't found the added target which was created with jquery.
how could i target an element with javascript that was created with either jquery or javascript.
thanx in advance.
EDIT:
the jsfiddle code
code:
btn = document.getElementById('add_album_btn');
btn.addEventListener('click', add_album_btn_func, false);
function add_album_btn_func(){
div = $('<div>').addClass('albums_div');
a = $('<a>').addClass('albums');
a.attr('onclick', 'return false;');
a.attr('onmousedown', 'autoScrollTo("new_section");').attr('href', '#');
a.append('★ New Album');
div.append(a);
section = $('<section>').attr('id', 'new_section');
header = $('<header>').addClass('inner_header');
header.append($('<h4>').append('New Album'));
inner_section = $('<section>').append($('<h5>').append('Images List :'));
footer = $('<footer>').addClass('inner_footer');
upload_btn = $('<a>').attr('id', 'new_section').addClass('upload_file ajax');
upload_btn.attr('href', 'some/link/');
upload_btn.append('Upload a file');
footer.append(upload_btn);
section.append(header);
header.after(inner_section);
inner_section.after(footer);
$('#wrap').append(div);
$('#separator').after(section);
}
var scrollY = 0;
var distance = 40;
var speed = 24;
function autoScrollTo(el){
var currentY = window.pageYOffset;
var targetY = document.getElementById(el).offsetTop;
var bodyHeight = document.body.offsetHeight;
var yPos = currentY + window.innerHeight;
var animator = setTimeout('autoScrollTo(\'' + el + '\')', speed);
if(yPos >= bodyHeight){
clearTimeout(animator);
}else{
if(currentY < targetY - distance){
scrollY = currentY + distance;
window.scroll(0, scrollY);
}else{
clearTimeout(animator);
}
}
}
EDIT:
apparently i wasn't clear enough what i want is the following:
i have this javascript code:
$(document).ready(function(){
$('.lightbox').click(function(){
$('.backdrop').animate({'opacity': '.50'}, 300, 'linear');
$('.box').animate({'opacity': '1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.close').click(function(){
close_box();
});
$(".backdrop").click(function(){
close_box();
});
function close_box(){
$('.backdrop, .box').animate({'opacity': '.0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}
a = $('<a>').addClass('lightbox').attr('href', '#').append('<br>Click to Test.');
$('body').append(a);
});
the html:
<h1>jquery light-box</h1>
<a href=# class=lightbox>open lightbox</a>
<div class="backdrop"></div>
<div class="box"><div class="close">X</div>this is the light box</div>
the CSS:
body{
font-family: Helvetica, Arial;
}
.backdrop{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
opacity: .0;
z-index: 50;
display: none;
}
.box{
position: absolute;
top: 20%;
left: 30%;
width: 500px;
height: 300px;
background: #ffffff;
z-index: 51;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 5px #444444;
display: none;
}
.close{
float: right;
margin-right: 6px;
cursor: pointer;
}
the jsfiddle link
the problem when the second link is added with javascript it seems to be llike its invisible to the function.
any help thanx in advance.
NOTE: this lightbox code is from the PHPacademy tutorials.
NOTE: if you'r going to give the answer about re_writing the function and re-assign it to the new created element i already know that i need another way.
thanx in advance.
Try this:
$(".lightbox").live("click", function() {
$('.backdrop').animate({
'opacity': '.50'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
DEMO HERE
UPDATE
Since the lightbox class element is added dynamically, you need to use event delegation to register the event handler like:-
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document.body).on('click', '.lightbox', function (e) {
e.preventDefault();
$('.backdrop').animate({
'opacity': '.50'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
DEMO HERE
As far as I understand, you want to trigger the same lightbox animation when you click on "Click to Test." as when you click on "open lightbox"?
In that case, the .click() just bind the event handler to the CURRENT set of matched elements. What you are looking for is .on() or .delegate()
Fiddle
How about to target element in callback function of jQuery post?
In this callback function, append element to document first, then target it.
Related
All I'm trying to do is something like this mechanism:
Here is what I've tried so far:
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setInterval(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
left = self.position().left;
self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
$(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
});
body{
padding: 20px;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: reletive;
width: 130px;
height: 30px;
display:none;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>tag1</a>
<a>tag2</a>
As you see, it will be repeated every time. How can I execute it once per hover? And why the position doesn't apply?
Also is what I'm doing a right algorithm for such thing?
Thank you.
I am not sure why you are using setInterval but I think this should work. I removed setInterval and everytime the mouseenter event occurs we can append <div class='tag_info'> and every time mouseleave event occurs we can remove the the appended div.
$(document).ready(function(){
$('#test').bind('mouseenter', function() {
var self = $(this);
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
left = self.position().left;
self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
$(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);
}).bind('mouseleave', function(){
$(this).children('.tag_info').remove();
});
});
body{
padding: 20px;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: reletive;
width: 130px;
height: 30px;
display:none;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="test">tag1</a>
Like Dij said:
What you're doing:
setInterval - (repeats your function every 525ms)
What you want:
setTimeout - (executes your function once after 525ms delay)
Read more:
setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp
setTimeout https://www.w3schools.com/jsref/met_win_settimeout.asp
i don't have expirience with js, so i need help.
i found some js scripts, how to show loading gif for all submit buttons and i'm trying to show that gif for one submit button only.
How it looks like:
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
CSS:
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: none;
width: auto;
height: auto;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
it's one to one expample from: http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx
And i need to use it for this button only:
asp:Button ID="InitDataButton" OnClick="InitData_Click" runat="server" Text="Show" Width="110px" Height="30px"
Okay. I don't know your server side but I checked the reference you provided. So here is another solution. Try move the script from the IsPostBack in Page_Load() to the button click handler for this button. I assume you are using VB, but the idea is the same for C#.
Dim script As String = "$(document).ready(function () { $('[id*=InitDataButton]').click(); });"
ScriptManager.RegisterStartupScript(this, "load", script, True)
Try this:
$( "#InitDataButton" ).submit(function( event ) {
alert( "Handler for .submit() called." );
ShowProgress();
event.preventDefault();
});
And LIVE EVENT is removed from version 1.9 onwards, so better avoid using it.
I'm trying to make this notification div that slides down if it is active. It slides down using this script:
<script type="text/javascript">
$(document).ready(function(){
$('#notice').slideDown(1000);
$('.exit').click(function(){
$("#notice").slideUp(400);
});
});
</script>
And the style is:
#notice {
background: #E0E0E0;
color: #FFF;
padding-left: 30px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 30px;
position: absolute;
z-index: 999999;
width: calc(100% - 60px);
top: 0;
font-weight: 200;
letter-spacing: 1px;
text-align: center;
display: none;
}
But how can I make this move everything else down as it slides down, even though the div below is at state 'position: fixed'. And slide everything else back up when it is removed using the .exit link.
Here you are one option to do it
Example here http://jsfiddle.net/jvarj4gk/2/
$('#notice').slideDown(1000);
var timer = setInterval(function () {
$('#fixed').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
$('.exit').click(function () {
$("#notice").slideUp(400, function(){
$(this).remove();
});
$('#fixed').animate({
top: 0
}, 400);
});
Update
To move the #body you can do it like this
Example http://jsfiddle.net/jvarj4gk/5/
$('#notice').slideDown(1000);
var timer = setInterval(function () {
$('#fixed, #body').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
$('.exit').click(function () {
$("#notice").slideUp(400, function(){
$(this).remove();
});
$('#fixed').animate({
top: 0
}, 400);
});
You can animate() the div below
var h = '+=' + $('#notice').height();
$('#fixedDivId').animate({
top: h;
},1000);
And almost the same stuff for slide up but h='-='+ $('#notice').height();
UPD
For your code it will look like this
$(document).ready(function(){
var h = $('#notice').height()+'px';
$('#notice').slideDown({duration:1000, queue:false});
$('#fixedDivId').animate({
top: h
},{duration:1000, queue:false});
$('.exit').click(function(){
$("#notice").slideUp(400);
});
});
Fiddle
Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.
To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});
Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/
I'm trying to make a range slider but it's working in single direction(to right) only and dragging out of parent container(#volume). How can I fix this?
I've attached a demo fiddle link.
Markup
<div id="volume">
<div class="progress">
<div class="volumeslider"></div>
</div>
</div>
CSS
#volume{
width:300px;
background: #ddd;
cursor:pointer;
}
.progress{
height:10px;
background:#999;
position:relative;
width:0;
}
.volumeslider {
background: #808080;
position: absolute;
width: 20px;
height: 20px;
border-radius: 15px;
right: -10px;
top: -5px;
}
JS
$('.volumeslider').bind('mousedown', function(e){
$('.volumeslider').bind('mousemove', function(e){
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - ($(this).width()/2) );
});
$('.volumeslider').bind('mouseup',function(){
$('.volumeslider').unbind('mousemove');
});
});
JS Fiddle:
http://jsfiddle.net/2mYm7/
You have not taken into consideration the padding you have given to the body element.
I have made some changes to the code.
$('.volumeslider').bind('mousedown', function (e) {
console.log('binded');
$('.volumeslider').bind('mouseup', function (e) {
console.log('unbinded');
$('.volumeslider').unbind('mousemove');
});
$('.volumeslider').bind('mousemove', function (e) {
console.log('mousemove');
$('.progress').width(e.pageX - $('.progress').offset().left + 'px');
$(this).css('left', e.pageX - 25- $(this).width());
});
});
Check this jsFiddle http://jsfiddle.net/2mYm7/1/
Here's an example of how to make it work always and everywhere. Right now it will stay dragging forever if you leave the element.
It includes border checks and makes sure the body is large enough so it stops dragging wherever on the page.
http://jsfiddle.net/2mYm7/5/
var dragging = null;
function startDrag(){
console.log('started dragging', this);
var $this = $(this);
dragging = $this;
$(document.body).bind('mouseup', stopDrag);
$(document.body).bind('mousemove', drag);
}
function stopDrag(){
console.log('stopped dragging', dragging[0]);
$(document.body).unbind('mouseup', stopDrag);
$(document.body).unbind('mousemove', drag);
dragging = null;
}
function drag(e){
var slider = dragging;
var progress = slider.parent();
var container = progress.parent();
var maxOffset = container.width();
progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}
$('.volumeslider').bind('mousedown', startDrag);