<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainDesign.master.cs" Inherits="Web_Assignment.MainDesign" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Master Design</title>
<link href="stylesheets/mainstyle.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="images/de_tour_ico.ico" />
<script>
var slide = function (div) {
if ($(div).css('display') === 'none') {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logobox">
<img class="bottom" src="images/de_tour_hover.png" />
<img class="top" src="images/de_tour.png" />
</div>
<div class="searchdiv">
</div>
</div>
<div class="sidebar">
Login
<div id="div1" style="display: none">
this will show
</div><hr />
<ul>
<li onclick="location.href='#'">Home</li>
<li onclick="location.href='#'">About</li>
<li onclick="location.href='#'">Gallery</li>
<li onclick="location.href='#'">Contact</li>
</ul>
</div>
<div class="container"><asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"></asp:ContentPlaceHolder></div>
</div>
</body>
</html>
I wonder why it wouldn't toggle the slides down whenever I clicked "Login"? Been searching and trying to sort this out for days.
I wanted to add a id: and password: inside the slided-div and possibly to hide it back whenever "Login" clicked again.
make sure include jQuery library first! and change the jquery code like below.
<script type='text/javascript'>
function slide(div) {
if ($(div).is(':hidden')) {
$(div).delay(300).slideToggle(500);
return false;
} else {
$(div).delay(300).slideToggle(500);
return false;
}
}
</script>
you can see the demo here ---> http://jsfiddle.net/Junkie/36ueV/
her for you:
http://jsfiddle.net/2EqCT/
Like you can see, the toggle work fine
Dont't forget to add the jquery lib ;)
$('a#foryu').click( function() { slide('#div1'); return false; } );
function slide(div) {
console.log("test");
if ($(div).css('display') === 'none') {
$(div).slideToggle(500);
return false;
} else {
$(div).slideToggle(500);
return false;
}
}
and please :) think about make the call of the function from your js code and not from the html tag
(JavaScript function in href vs. onclick)
Related
I have a problem, I'm doing a little game and I made a level, where you just have to change the level number to go to the next level, but when the correct value is sent it's supposed to redirect to the next level but it doesn't work ...
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
document.location.href = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
document.location.href = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper"></div>
<div class="level-number-container">
<form method="GET" name="form1">
<input onclick="getVal()" id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
</body>
</html>
To the people that have this problem, Here is the JS, I put a window.onload, it means that it only launch when the page is completely loaded :
window.onload = function() {
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.location.href = "aw3za.html"
}
})
}
document.location has been deprecated for almost as long as JavaScript has existed. Don't use it So use window.location
function getVal() {
var nmb = document.getElementById('input').value;
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
if(nmb == 3) {
window.location = "aw3za.html"; //If the value is correct it redirects to the level 3
}
else {
window.location = "2ksdkwa.html"; //If the value isn't correct it stays on the level 2
}
})
}
I don't understand why you need trigger onClick function on input box. that function only execute when you click on that. So when you clicking that value is empty. then when you try to perform keyup the value will be empty. Actually you can use document.location.href.
Problem is your arrangement. Try this
var element = document.getElementById('input');
element.addEventListener('keyup', function(event) {
var nmb = document.getElementById('input').value;
if(nmb == 3){
console.log('in');
document.location.href = "new.html";
}
})
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number">
</form>
</div>
</div>
Several things here:
First you have an extra div closing in the interesting part of your code here:
<div class="level-number-wrapper"></div>
you should erase it.
Second, you don't need to use the function getVal() to add an event listener, you should add it directly.
Last, if you are staying in the same page if unless you change the value to 3 then you don't need the else part of the if.
This being said, this code works for me, check it out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RodrigueSS 2 | Level 2</title>
<link rel="stylesheet" href="assets/style/level_template.css">
<link rel="stylesheet" href="assets/style/level2_style.css">
<script src="https://kit.fontawesome.com/57d547920e.js" crossorigin="anonymous"></script>
<script src="assets/script/level2.js"></script>
<script type="text/javascript" src="assets/script/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="prev-page-container">
<img class="prev-page-arrow" src="assets/img/prev-arrow.svg" alt="Back arrow">
</div>
</header>
<!--This is the interesting part--------->
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<!--------------------------------------->
<footer>
<div class="media-container">
<ul>
<li><a class="media-link" href="https://www.instagram.com/r_dr_go/"><i class="fab fa-instagram"></i></a></li>
<li><a class="media-link"href="https://twitter.com/Rodrigu40035063"><i class="fab fa-twitter"></i></a></li>
<i class="fas fa-arrow-right"></i>
</ul>
</div>
</footer>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
document.location.href = "aw3za.html"
}
})</script>
</body>
</html>
I think you can use both location and window but window is a bit better for cross browser safety as stated here:
What's the difference between window.location and document.location in JavaScript?
window.open
Calling window.open function in the listener had made the browser open the tab.
Here is the working code:
1. index.html
<!DOCTYPE html>
<html>
<body>
<div class="level-number-wrapper">
<div class="level-number-container">
<form method="GET" name="form1">
<input id="input" name="numbox1" class="level-number" type="number">
</form>
</div>
</div>
<script>
document.getElementById('input').addEventListener('keyup', function(event) {
if(document.getElementById('input').value == 3) {
window.open("aw3za.html")
}
})</script>
</body>
</html>
2. aw3za.html
<!DOCTYPE html>
<html>
<head>
<title> Level 2</title>
</head>
<body>
<h1>AW3ZA</h1>
</body>
</html>
Try to replace
document.location.href
By
window.location
I am making a website and trying to change the value of active car variable which doesn't change even after click on the division the value of activecar remains as .blueimg only even after clicking on the divisions
What is incorrect?
actions.js file
var activecar=".blueimg";
$(".redimg").hide();
$(".greyimg").hide();
$(".silverimg").hide();
$(".red").click(function(){
hideshow(".redimg",activecar);
});
$(".blue").click(function(){
hideshow(".blueimg",activecar);
});
$(".grey").click(function(){
hideshow(".greyimg",activecar);
});
$(".silver").click(function(){
hideshow(".silverimg",activecar);
});
function hideshow(colour,activecar) {
console.log("before");
console.log(activecar);
$(activecar).hide();
$(colour).show();
activecar = colour;
console.log("After");
console.log(activecar);
}
This is my index.html file
<!doctype html>
<html lang="en">
<head>
<title>CollegeDunia</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="./assets/blue.jpg" class="blueimg"/>
<img src="./assets/red.jpg" class="redimg"/>
<img src="./assets/grey.jpg" class="greyimg"/>
<img src="./assets/silver.jpg" class="silverimg"/>
<div>
<a class="blue">Blue</a>
</div>
<div >
<a class="grey"> Grey</a>
</div>
<div >
<a class="red">Red</a>
</div>
<div >
<a class="silver">Silver</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="actions.js"></script>
</body>
</html>
change function's parameter name. It has same name with your global variable.
function hideshow(colour, car) { //activecar changed to car
On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}
Why is the click event on a hyperlink not fired?
#Html.ActionLink(
"Show the privacy policy",
"PrivacyPolicy",
null,
new { id = "privacyLink" })
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function () {
alert('a');
});
});
</script>
The myDiv click event is fired as expected but the privacyLink's event is not fired, that is the alert is not shown.
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/AjaxDemo.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ Log On ]
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
<section id="main">
<h2>Welcome to ASP.NET MVC!</h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
<div id="myDiv">
<p>
Me Gusta
</p>
</div>
Show the privacy policy
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).src = $(this).attr('href');
});
});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
Other than the fact that you should return false from the click callback of your anchor to prevent the browser from redirecting away I do not see anything wrong with it:
$('a#privacyLink').click(function () {
alert('a');
return false;
});
Also make sure that you do not have other elements with id="privacyLink" anywhere in your DOM because ids must be unique.
Also check your js console in the browser to ensure that you do not have some javascript errors preventing the .click handler to be attached properly.
Try with event preventDefault() method.
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).attr('href', $(this).attr('href'));
});
Use this :
Since your anchor is not formed , your binding is not working. Use http://api.jquery.com/on/
$("a#privacyLink").on("click", function(event){
alert('a');
});
This is the jsfiddle to simulate your condition (Dynamic generation of HTML elements)
http://jsfiddle.net/nhNpw/6/
So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }