Unable to increase font size on click of a button - javascript

I want to change the font size of two divs when I click on a particular button however button click is not responding, pls help.
I am using two div IDs in one selector.
also pls let me know where is the error, below is my code.
<html>
<head>
<title>
Example 2
</title>
<style>
body
{
margin:10px 2em;
}
.switcher
{
float:right;
margin:10px;
background-color:#ddd;
border: 1px solid #000;
padding : 10px;
font-size:0.9em;
}
.large
{
font-size:2em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function{
$('#switcher-large').on('click',function(){
$('#header, #chapter-preface').addClass('large');
});
});
</script>
</head>
<body>
<div id="container">
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
<div class="author">by Charles Dickens</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
<p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.</p>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
</body>
</html>

You have a syntax error
Try replacing
$(document).ready(function{
for
$(document).ready(function(){

Try this
$('#header h2, #chapter-preface h3, #chapter-preface p').addClass('large');

Related

Using JQuery to hide and show text

I want to use JQuery to hide text when web page is launched and when you click on an item it will show the hidden text.
When I load the page it shows the text in h2 and the text in h3 and hides the text in ptdeats as expected. When I click on the text containing "Jason O'Reilly", it doesn't show the text "Hi there, my name is Jay......".
The classes trainers ptpics, pt, center are configured in css.
The jquery is also configured to highlight h3 and also when h3 is click it shows the text and when you click on h3 it hides it again.
This is what I have configured in html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
This is the css configuration
.trainers
{
width: 80%;
background-color: #36454F;
color: #FFFFFF;
text-align: justify;
height: auto;
margin-left: 10%;
margin-left: 10%;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.pt
{
width: 100%;
cursor: pointer;
color: #FFFFFF;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.ptpics
{
width: 33%;
background-color: #36454F;
color: #FFFFFF;
border: 1px;
border-color:#009900;
text-align: justify;
height: auto;
float: left;
padding-left: 6px;
padding-right: 6px;
}
JQuery configuration:
$(document).ready(function()
{
$(".me").hide();
$(".pt").click(function(){
$(".me").show();
});
});
It might be a problem with which element the event is triggering on. try:
$(".ptpic").click(function(){
$(".me").show();
});
If that works, then you might not be clicking in the right spot.
Your code should work. I tested it out, and it did work.
Make sure you close the html tabs:
<div class="ptpic center">
<h3 class="pt center">My Name</h3>
<p class="center"><img src="images/me.jpg" alt="Me" width="320" height="350"></p>
<p class="me">Hi there</p>
Make sure you click on the actual text that says "My Name" because if you just click close to it, it might not exactly work. A good way to test it out is to put a background color on the target object (here it's either h3 or .pt) via CSS. Then, clicking anywhere inside that box should be okay!
If you instead wanted the text to toggle hide and show, then do this into your javascript:
$(document).ready(function(){
$(".me").hide();
$(".pt").click(function(){
$(".me").toggle();
});
});
This will alternate between show and hide every time you chick on the .pt block.
Hope this helps!
Okay, so I copied and pasted your code and made a few changes! These changes should fix them. Let me know if they work.
HTML:
<!--Here I ONLY added the id's into each h3 elements. They should not cause any damage to the code. I will tell you why at the end. -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center" id="h3_1">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_2">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_3">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
JAVASCRIPT:
//I simply modified the classes to put what you wanted it to do. I guess this was simply a class issue then? Because everything seems alright except that.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").show();
});
});
JAVASCRIPT, SUGGESTED:
//This should work better because you want the user to be able to remove that new added text if they want to. Just a minor suggestion. Toggle makes a hidden object to show and a shown object to hide.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").toggle();
});
});
JAVASCRIPT, ADDUP WITH ID'S, ALSO SUGGESTED:
//This is where the ID's come into play.
$(document).ready(function(){
$(".ptdeats").hide();
// console.log(this);
$(".pt").click(function(){
$("#"+this.id).next().next().toggle();
});
});
Explanation: The two first Javascript will show all the texts in all ".ptdeats" when you click on ".pt" because you tell JS to show ".ptdeats". Any HTML with that class will show.
Nevertheless, there's a cool trick in JS where you can find any specific attribute of the specific element that you clicked on. Also, if you're unfamiliar with "this", "this" basically designates the elements that you are on. For example, if you click on <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>, even though you designated it on JS with ".pt", "this" refers specifically to <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>. Try uncommenting the // console.log(this); and check your web console to see what I mean.
Finally, .next() in jQuery designates the very next element. In here it works only because of how you structured your HTML. The first .next() is the p tag with the image in it and the second one is the text you actually want to toggle.
This is better because it will toggle the text specific to the person you are clicking on!
Let me know if this works. I am confident it will: I copied and pasted from what you gave and made only minor changes. I also tested it on four different browsers: Opera, Mozilla, Chrome, and Safari. I don't have IE, so I am not sure how it will behave, but this is nothing too complicated so it should work as expected.

Weird bug on my javascript showhide code

I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!
Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/
Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}

How to hide your custom website.com website menu in their editor

I am trying to do something similar to https://mylapka.com/pem so that the text disappears and all the elements come back on the www.website.com editor. I am trying to create a div with a background image that covers all the elements and disappears when clicked on. It just wont cover the menu no matter what I try. Is there a way to do this. I am very new to coding and not very good at it so any help is greatly appreciated, trying to learn!
I put all the following code in a custom html box.
<html>
<head>
<script type="text/javascript">
$('#btn').click(function(e){
$('#fancy, #btn').fadeOut('slow', function(){
$('#bank, #btn-bk').fadeIn('slow');
});
});
$('#btn-bk').click(function(e){
$('#bank, #btn-bk').fadeOut('slow', function(){
$('#fancy, #btn').fadeIn('slow');
});
});
</script>
</head>
<body>
<div>
<a id="btn">
<p style="background-image:url(http://i1158.photobucket.com/albums/p616/amattson21/
Untitled-1.png);width:1200px;height:800px;position:relative;z-index-1000;"
align="center">
</p>
<p style="color:white;font-size:200px;margin-top:-250px;text-shadow: 2px 2px 0px #000000;"
align="center">
TEXT
</p>
</a>
</div>
</body>
</html>
Please check out the codes I made. I created another html because I believe that this is the proper way to achieve the output you want.
Fiddle
HTML
<div id="main">
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
<p>Your main website here.</p>
</div>
<div id="overlay">
<p class="text">TEXT</p>
</div>
CSS
html, body, #main, #overlay {
width:100%;
height:100%;
}
p, body {
margin:0;
padding:0;
}
#main {
background:url('http://subtlepatterns.com/patterns/old_map.png');
}
.text {
color:white;
font-size:200px;
text-shadow: 2px 2px 0px #000000;
text-align:center;
z-index:10;
position:absolute;
top:50%;
left:50%;
margin:-150px -230px ;
}
#overlay {
left:0;
top:0;
position:absolute;
background:url('http://subtlepatterns.com/patterns/old_map.png');
}
jQuery
$('#overlay').click(function (e) {
$(this).fadeOut();
});

CSS How to use margins with different divs

Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!
You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.

Trouble with Javascript mouseover

I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below.
HTML
<html>
<!--Header Files-->
<head>
<!--Icon for tabbed browsers-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>
<!--Including the CSS file that gives all the appearance attributes to the page-->
<link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>
<!--Including the JavaScript file to give interaction with the web objects-->
<script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--Title of the page-->
</head>
<!--Body-->
<body>
<!--Top Banner-->
<div class="button">
</div>
<div class="head">
<a href="index.html"><div class="logo">
<image src= "" height="60px" width="320px"/>
</div></a>
<div class="contact">
</div>
</div>
<div class="bar">
<a href="talentdatabase.html"><div class="one">
<h3>Talent Database</h3>
</div></a>
<a href="facilities.html"><div class="two">
<h3>Facilities</h3>
</div></a>
<a href="print.html"><div class="three">
<h3>Print Campaigns</h3>
</div></a>
<a href="tv.html"><div class="four">
<h3>TV Campaigns</h3>
</div></a>
<a href="contact.html"><div class="five">
<h3>Contact Us</h3>
</div></a>
</div>
<div class="container">
<div class="column1">
<div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
<div class="caption">Male&nbsp</div>
<div class="popcontain1">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
<div class="gutter1">
</div>
<div class="column2">
<div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
<div class="caption">Children&nbsp</div>
<div class="popcontain2">
<div class="bpop1">&nbsp Boy</div>
<div class="bpop2">G &nbsp i &nbsp r &nbsp l &nbsp </div>
</div>
</div>
<div class="gutter2">
</div>
<div class="column3">
<div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
<div class="caption">Female&nbsp</div>
<div class="popcontain3">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
</div>
<div class="bottombar">
<a href="index.html"><div class="one">
<h3>Home</h3>
</div></a>
<div class="bottomleft">
<h3></h3>
</div>
</div>
</body>
</html>
What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.
The css is:
.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;
}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}
.popcontain1{
display:none;
}
.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}
.apop2{
position:absolute;
text-align:right;
font-size:1.5em;
background: rgb(255, 241, 35);
background: rgba(255, 241, 35, .4);
width:100%;
top:70%;
}
.apop3{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(50, 205, 50);
background: rgba(50, 205, 50, .6);
width:100%;
top:80%;
}
For this I've been using the following code in the javscript file:
$(document).ready(function() {
$(".column1").hover(function () {
$(".popcontain1").toggle();
})
})
EDIT:
Am I including all the right libraries? I'm using the google hosted jquery library.
First thing you are trying to display a div with class pop contain which is not present there.
So why its not displaying.
Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.
Looking your code it seems you want to apply hover on each column and display popcontain inside it.
So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';
Now this will work for all div.
If you want to show it on mouse over and hide on mouse out.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").toggle();
},function(){
$(this).find(".popcontain").toggle();
})
})
If you want to permanently show it on first hover.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").show();
})
})
However you don't need to use jquery if you just want to show hide the inner popcontain.
Following css will help you to achieve what you want.
.popcontain{
display:none;
}
.column:hover .popcontain{
display:block;
}
Edit for your first comment
If you are trying it on local put http: in the link you have included jquery. change this link
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
If you are not putting http: it is searching jquery file on local file system instead of web.
Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:
$("[class^=column]").hover(function () {
$("[class^=popcontain]").toggle();
})

Categories