I want to hide all the content and show some content as the user click.
In anchor tag I used 'scr' before its id example: scrhome_screen.
But in div tag that I want to show has id home_screen.
Please explain why it is not working?
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
----------edit-------------------
my html code
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<!-- MENU STARTS HERE -->
<ul id="menu">
<li><a href="#" id='scrhome_screen'>Home</a></li>
<li>
New/Open Project
<ul class="hidden">
<li><a href="#" id='scrsec_screen'>New Project</a></li>
<li><a href="#" id='scrthird_screen'>Open Project</a></li>
</ul>
</li>
<li>
Region
<!-- <ul class="hidden">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul> -->
</li>
<li>Insurance Indices</li>
<li>Insurance Scheme</li>
<li>Help</li>
</ul>
<!-- HOME STARTS HERE -->
<div id="home_screen">
<div id="description">
<fieldset>
<p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p>
<p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers’ premium, maximum claim,
claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies
and their subsequent effect on the economics of the insurance scheme.</p>
</fieldset>
</div>
<hr id="ver_line" width="1" size="200">
<div id="login_signup">
<fieldset>
<p class="descriptionHead">LOGIN</p>
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
</fieldset>
</div>
</div>
<!-- 2nd FIELDSETS -->
<div id="sec_screen">
<p>another content is here</p>
</div>
<!-- 3rd FIELDSETS -->
<div id="third_screen">
<p>third content is here</p>
</div>
In your code this <li><a href="#" id='scrhome_screen')>Home</a></li> paranthesis is unwanted, it may be the reason. And then again <li><a href="#" id='scrthird_screen')>Open Project</a></li>
Here is another mistake
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
Tags are closed in the wrong order
Your js works, I did not change anything.
By the way in .substr you can just do id.substring(3) instead of id.substring(3,id.length)
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if (id.substring(0, 3) == "scr") {
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll() {
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide();
}
function showTab(divName) {
$('#' + divName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_screen">home_screen</div>
<div id="sec_screen">sec_screen</div>
<div id="third_screen">third_screen</div>
home_screen
sec_screen
third_screen
Related
this is the code that is perfectly working in console:
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
and the code below is what I saved in my custom js file and not working on website load
jQuery(document).ready(function( $ ){
jQuery(window).bind("load", function() {
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
});
});
I also want to know if it is possible to trim this code as I think I might have added something which unnecessary.
I am using it on two radio buttons(which are inactive by default) and when a user clicks on either of them a short form opens.
Here's the image:
And this is the html:
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>
give the radios a class
use closest and siblings
$(function() {
$(".school").on("click",function() {
$(this).closest("ul").find(".first_high").hide();
$(this).siblings(".first_high").show();
});
});
.first_high { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer">
<input id="#school" class="school" name="School" type="radio" value="highschool" />
<label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer">
<input id="#University" class="school" name="School" type="radio" value="University" />
<label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>
I am a beginner in HTML/CSS/JavaScript. I am doing a final project and I have everything done, including the mobile pages too. In my web page I created a email form that a user can fill out if they wish to contact me. Once they click the "Submit" button, the client side email application (outlook or equivalent) will open and populate the fields with the information that was entered on the web page. This works fine in Mozilla Firefox, but when i switch over to anything else, I get mixed results. Sometimes Inter Explorer will work, then all of sudden it wont. Chrome will work randomly once, and then never again. Can someone please tell me what its is I am missing? Here is my code that follows:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome To MyHomepage</title>
<link rel="shortcut icon" href="../../IMG/clipart.png">
<link rel="stylesheet" href="../../CSS/normalize.css">
<link rel="stylesheet" href="../../CSS/main.css">
<script src="../../js/Javascript.js"></script>
</head>
<body>
<header>
<div id="leftheader">
<img id="leftpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="rightheader">
<img id="righthpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="midhead">
<h2>Welcome to the Home Page of My Name</h2>
<h3 class="shadow">Security Is Everyone's Responsibility!!!</h3>
<h4 class="contact">Contact Me Now!!!</h4>
</div>
</header>
<main>
<div class="backcolor">
<ul class="navbar"><!--top-level-menu-->
<li id="firstnav" >Home
<ul class="dropdown-content"><!--2nd-level-menu-->
<li>JQUERY</li>
</ul>
</li>
<li id="secnav">Experience
<ul class="dropdown-content"><!--2nd-level-menu-->
<li>Civilian</li>
<li>Military</li>
</ul>
</li>
<li id="thirdnav" >About Me
<ul class="dropdown-content"><!--2nd-level-menu-->
<li>My Travels
<ul class="dropdown-extension"><!--3rd-level-menu-->
<li>CONUS</li>
<li>OCONUS</li>
</ul>
</li>
<li>Education</li>
<li>Hobbies</li>
<li><a href="../../HTML/Aboutme/Special.html">Sepcial Projects<a/></li>
<li>Soceities</li>
</ul>
</li>
<li id="fourthnav">Volunteer Work</li>
<li id="fifthnav">Skills</li>
<li id="sixthnav">Goals
<ul class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../../HTML/Goals/GoalsST.html">Short Term</li>
<li><a href="../../HTML/Goals/GoalsLT.html">Long Term</li>
</ul>
</li>
<li id="lastnav" class="active">Contact Me
<ul id="lastnav"class="dropdown-content"><!--2nd-level-menu-->
<li>Phone</li>
<li>Email
<ul class="dropdown-extension1"><!--3rd-level-menu-->
<li><a href="../../HTML/Contact/webemail.html">Web Email<a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="mainsec">
<div id="leftsec">
this is a test
</div>
<div id="rightsec">
this is a test
</div>
<div id="midsec">
<div class="contact-section1">
<h3 id="quest1">
How to Contact me?
</h3>
<h4 id="answer1" class="shadow1">
You can contact me by filling out the information below.
Please give me 24-72 hours to reply back.
</h4>
<h4>Please note, clicking "Submit" will open the email application
on your device!</h4>
</div>
<div id="body">
<div id="section">
<form id="email_form" name="email_form" action= "sent/sent.html" method="get">
<label for="email_address1"id="label">Email Address:</label>
<input type="text" id="email_address1" name="email_address1"</label>
<span id="email_address1_error">*</span><br><br>
<label for="emal_address2"id="label">Re=Enter Email Address:</label>
<input type="text" id="email_address2" name="emaill_address2">
<span id="email_address2_error">*</span><br><br>
<label for="name"id="label">Your Name:</label>
<input type="text" id="name" name="name">
<span id="name_error">*</span><br><br>
<label for="subject"id="label">Subject:</label>
<input type="text" id="subject" name="subject">
<span id="subject_error">*</span><br><br>
<label for="message" id="label">Message:</label>
<textarea type="text" id="message" tabindex="3"></textarea>
<span id="message_error">*</span><br><br>
<label id="label"> </label>
<input type="button" id="join_list" value="Submit">
</form>
</div>
</div>
<h4 class="disclaimer" id="shadowtext">If you do not wish to use your email application, please click here
to go to the web page email application.</h4>
</div>
<div class="contactemail-section2">
</div>
</div>
</div>
</div>
</main>
</body>
<footer>
<p>© 2016, My Name All Rights Reserved.</p>
</footer>
</html>
JavaScript:
var $=function(id){
return document.getElementById(id);
}
var joinList=function (){
var emailAddress1=$("email_address1").value;
var emailAddress2=$("email_address2").value;
var Name=$("name").value;
var Subject=$("subject").value;
var Message=$("message").value;
var isValid=true;
var Toemail="I have removed the email address for this post";
var CCemail="I have removed the email address for this post"";
Message=Message+"%0D%0A"+"%0D%0A"+"%0D%0A"+"From,"+" %0D%0A"+ Name + "%0D%0A"+emailAddress1;
if(emailAddress1=="")
{
$("email_address1_error").firstChild.nodeValue="This feild is required.";
isValid=false;
}
else
{
$("email_address1_error").firstChild.nodeValue="";
}
if(emailAddress2=="")
{
$(email_address2_error).firstChild.nodeValue="This feild is required.";
isValid=false;
}
else if (emailAddress1!==emailAddress2)
{
$(email_address2_error).firstChild.nodeValue="The email addresses must match";
isValid=false;
}
else
{
$("email_address2_error").firstChild.nodeValue="";
}
if(Name=="")
{
$("name_error").firstChild.nodeValue="This feild is required.";
isValid=false;
}
else
{
$("name_error").firstChild.nodeValue="";
}
if(Subject=="")
{
$("subject_error").firstChild.nodeValue="This feild is Required";
isValid=false;
}
else
{
$("subject_error").firstChild.nodeValue="";
}
if(Message=="")
{
$("message_error").firstChild.nodeValue="This feild is requried";
isValid=false;
}
else
{
$("message_error").firstChild.nodeValue="";
}
if (isValid)
{
var mailto_link = 'mailto:' + Toemail + '?cc=' + CCemail + '&subject=' + Subject + '&body=' + Message;
window.open('sent.html',"_self");
win = window.open(mailto_link, 'sent.html');
if (win && win.open && !win.closed)
{
win.close();
}
}
}
window.onload=function()
{
$("join_list").onclick=joinList;
$("email_address1").focus();
}
I have not added my CSS file because i do not think it is needed, beside i got so many rules in there it will be impossible to decipher.If you really need it, then i will post it.
I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.
HTML code
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul>
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>
</div>
</br>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<input type="submit" id="addButton" value="Add"/>
</form>
And the jQuery code
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('item:textbox');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
var $newText=$('input:textbox').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.
$(document).ready(function(){
$('#addButton').click(function(){
var newItem = $('#itemDescription').val();
$('#myList').append('<li class="hot">' + newItem + '</li>');
$('#itemDescription').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul id="myList">
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<button type="button" id="addButton">Add</button>
check this fiddle.
you had a small error in your jQuery. Here is the working code:
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
e.preventDefault();
var $newText=$('#itemDescription').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: textbox
To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.
I want to create a voting system. How can I link the .click event with the progress bar so that when a user clicks the button the progress bar updates in sync.
Here's my code
HTML
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="content">
<h3 class="title">Who's better ?</h3>
<ul>
<li class="option" id="option_1" >
Messi
<p id="score_1">0</p>
<div class="progressbar_1">
</div>
<br>
</li>
<br>
<li class="option" id="option_2" >
Ronaldo
<p id="score_2">0</p>
<div class="progressbar_2"></div>
<br>
</li>
<br>
</ul>
</div>
Jquery
$('#option_1').click(function() {
$('#score_1').html(function(i, num) { return num*1+1});
});
$('#option_2').click(function() {
$('#score_2').html(function(i, num) { return num*1+1 });
});
$(function() {
$( ".progressbar_1" ).progressbar({value: 50});
});
$(function() {
$( ".progressbar_2" ).progressbar({value: 50});
});
http://jsfiddle.net/h16nhz5c/5/
You need to re-call progressbar() upon voting. Something like:
HTML:
<ul>
<li class="option" id="option_1">
Messi
<p class="score" id="score_1">0</p>
<div class="progressbar">
</div>
</li>
<li class="option" id="option_2">
Ronaldo
<p class="score" id="score_2">0</p>
<div class="progressbar">
</div>
</li>
</ul>
Javascript:
$('.option').click(function() {
var $this = $(this);
// store voting value in data-voting
if (!$this.data('voting'))
$this.data('voting', 0);
var voting = parseInt($this.data('voting'), 10);
voting++;
$this.data('voting', voting);
$this.find('.score').html(voting);
$this.find('.progressbar').progressbar({value: voting});
});
See Fiddle
So i'm pretty new to this, please bear with me :)
And it's kinda working for me, this is what I have:
HTML:
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
<span id="filter-count"></span>
</fieldset>
jQuery:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Klasser fundet = "+count);
});
});
But when I make a search it do find the li, but it lose most of the style, if you see the screenshot it will make better sense then I can do in writing.
<div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
<li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
<div class="entry_title entry_details">
<h4>Koge Handelsskole - 3C</h4>
</div>
<div class="entry_photo">
<ol>
<li style="display: list-item;"><img alt="" src=
"https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
</ol>
</div>
<div class="entry_votes entry_details">
<span class="votes">65</span> Stemmer
</div>
<div class="entry_description entry_details ss_preserve_ws"></div>
<div class="itemActions entry_actions">
<ul>
<li class="item_vote" style="display: inline;"><a class="vote_link vote"
href="#" onclick=
"SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
<li class="item_share" style="display: inline;"><a class="share_link" href=
"#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
venner</a></li>
</ul>
</div>
<div class="clear"></div>
</li>
<li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
"display: list-item;">
<div class="entry_title entry_details">
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>
Wrong Selector
In your target code you are searching for all the li's under .ss_voting_manual .ss_voting_entry_list including grand children.
$(".ss_voting_manual .ss_voting_entry_list").find("li")
This is causing your grandchildren li's, the one's that are wrapping the img tags, to be hidden.
Solution
Change your selector to fetch only direct descendant li's:
$(".ss_voting_manual .ss_voting_entry_list").children("li")
or
$(".ss_voting_manual .ss_voting_entry_list > li")
This will only fetch the first direct set of li's after the ul.