When I click on this link, nothing happens. What is the problem?
This is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
var status = $(".link input[name=status]").val();
if (status == "delete") {
alert("it works.");
}
});
});
This is my html code:
<a href='#' class='link'>
<input name='status' value='delete' type='hidden'/>alert me!!
</a>
No issue found in you code. I just added jQuery and this code is working and showing alert.
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$(".link").click(function(){
var status=$(".link input[name=status]").val();
if( status=="delete" ) {
alert("it works.");
}
});
});
</script>
<a href='#' class='link'><input name='status' value='delete' type='hidden'/>alert me!!</a>
Related
I was just wondering how to fade out a page then open up another html page. Right now I have:
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
I want it so that when "close" is clicked, the page fades out then then opens up my index.html page?
Currently my code is not working :(.
Thanks in advance!
Try this
HTML
<div class="close" data-link="https://www.youtube.com">
<div class="lr">
<div class="rl">LOREM IPSUM DOLORs</div>
</div>
</div>
JS
$('.close').click(function() {
var destination = $(this).data("link");
$("body").fadeOut(1000,function(){
window.location.replace(destination);
});
});
There is no a tag in your html. This code should work.
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
Your JavaScript has an extra closing bracket and closing parenthesis. You are also missing your a
<div class="close">
Click Here
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function(e) {
e.preventDefault();
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
</script>
JS Fiddle: https://jsfiddle.net/4wz9uqwd/
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "scroll");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Live example:
www.damianodesign.com
I've created a form that when a user submits, the form the #search div is replaced by the #loading div that shows a loading image. So far it works fine.
The problem I have now is that I want the #loading div to be replaced by the #results 10 seconds after the #loading div is shown.
Can someone please help with the last few lines of code?
Here it is so far:
<div id="search">
<div id="search-area">
<h1>Heading Here</h1>
<form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="text" value="http://"/>
<input type="submit" value="Analyze"/>
<div class="clearfix"></div>
</form>
</div>
<div class="clearfix"></div>
</div>
<script>
$( "#target" ).submit(function( event ) {
$("#search").slideUp("slow", function() {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
});
$("#loading").delay(10000).slideUp("slow", function(){
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
event.preventDefault();
});
</script>
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");
});
setTimeout(function () {
$("#loading").slideUp("slow", function () {
$(this).replaceWith("<div id='done'>Done!</div>");
});
}, 10000);
event.preventDefault();
});
The loading div is not available until after the first animation finishes, the second animation needs to be inside the callback:
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
$("#loading").delay(10000).slideUp("slow", function () {
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
})
event.preventDefault();
});
DEMO
I have a gallery of thumbnails, all with class .thumb that are added by a php code that a friend wrote. I tried to add a simple click function:
$('.thumb').click(function () {
console.log('test');
});
And it does not log anything. I had tried this before we switched to php as well, and it still didn't work. (At that time the images were imported with jQuery)
Below is the relevant html code:
<div id="navbar">
<img src="images/sig.png">
<ul>
<li id="port"><a>Portfolio</a></li>
<ul id="inner">
<?php
$dir = opendir("images/portfolio");
while ($dosya = readdir($dir)){
if(substr($dosya,-1)!="." and is_dir("images/portfolio/".$dosya)){
if(file_get_contents("images/portfolio/".$dosya."/active.dl") == 'active'){
?>
<li class="galleryActivator" cats="<?=$dosya?>"><?=file_get_contents("images/portfolio/".$dosya."/name.dl")?></li>
<?php }}
}?>
</ul>
<li><li>Events</li></li>
<li>About</li>
</ul>
</div>
<div id="main">
<div id="thumbnails">
</div>
</div>
And the script:
(function(){
$('#inner').hide();
$('#main').hide();
$('#slideshow').hide();
$('#port').click(function(){
$('#inner').slideToggle(200);
console.log('test');
});
$('.galleryActivator').click(function () {
$("#main").hide();
$("#main img").remove();
var category = $(this).attr('cats');
var catSrc = "images/portfolio/" + category + "/files/";
var size = $(this).attr("data-size");
console.log(size);
var $thumbnails = $("#thumbnails");
$thumbnails.load( "albumler.php?adres="+category );
$('#main').fadeIn(200);
});
$('.thumb').click(function () {
console.log('test');
});
})();
it seems you are loading your thumbnails dynamically; you should set your event handler like this:
$(document).on("click", ".thumb", function () {
console.log('test');
});
you dont have anything in your above HTML with a class of thumb
but once you do just add document ready
$(document).ready(function(){
$('.thumb').click(function () {
console.log('test');
});
});
I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle
This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});
If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.
How do I get the text beside my button to change? Everything else works fine except for these button messages. Thanks for your help.
<!DOCTYPE html PUBLIC "><head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
});
});
<!--NOT WORKING-->
$("button").click(function () {
$("h6").toggle();
});
</script>
</head>
<!--NOT WORKING-->
<h6>
<input type='button' value='+' id='PlusMinus'/>
Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>
BUTTON STATE 'Message should toggle between Larger Text and Smaller text'
[+] Larger Text
[-] Smaller Text
This worked for me:
<!DOCTYPE html PUBLIC "><html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
$("body h6").toggle();
});
});
</script>
</head>
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>
The changes I made were:
changed $("h6").toggle(); to $("body h6").toggle(); and moved it up to the $('#PlusMinus').click function
moved the button out of the "Larger Text" h6 element
added < html > tag at the top
removed "Not Working" comments ;)
instead of
$(this).val("-");
use
$(this).attr('value','+');
try
first correct the html
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display:none" >Smaller Text</h6>
then jquery
$("input[type=button]").click(function () {
if($(this).val() == '-')
$(this).val("+");
else $(this).val("-");
$("h6").toggle();
});
});
see Demo
One problem is that you have:
$("button").click(function (){});
...but your HTML shows:
<input type="button" id="PlusMinus" />
You don't want to select a button element. You want an input element of type button. Try this:
$(':button').click( function(){} );
...assuming you're not going to select the button by its ID. Note that this could select more than one element, so the ID approach (or some other means of uniquely identifying the button you have in mind) would be preferable:
$('#PlusMinus').click( function(){} );