I'm kind of a newbie coder and I'm having a bit of trouble.
I want to make an element expand when I click a line of text, but it simply is just not expanding and I'm not sure what I'm doing wrong.
For reference, this is the site or info card I'm working on.
The text that says "click me" is what I'm trying to make expand said element.
I would really appreciate any help or advice on how to fix this.
$(".expander").click(function() {
if ($(this).hasClass("expander")) {
$(this).removeClass("expander");
} else {
$(this).addClass("expander");
}
});
.expander {
height: 3em;
overflow: hidden;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="box-shadow: 2px 2px 4px #242424; background-color: rgba(33, 33, 31, 2); border-top: double #831407 0px; border-left: double #831407 0px; padding: 10px; width: 159px; overflow:auto; position:relative; center: 20px; top: 20px;">
<font face="times new roman" color="#831407" size="1">
<div align="center" style="text-shadow: 0px 0px 0px #831407, 0px 0px 0px #3C4595;">
<font size="2px"><img src="https://yokai.crd.co/assets/images/gallery03/4246c620.gif?v=b4df531c" style="width:15px;height:15px"> <b>mikey</b> <img src="https://yokai.crd.co/assets/images/gallery03/58ed5769.gif?v=b4df531c" style="width:15px;height:15px"></font>
<font face="times new roman" color="#831407" size="1"><br><b>they</b> | <b>adult</b> | <b>isfp</b></font>
<br>
</div>
</div>
<div class="expander">click me
You can also use .slideToggle() method of jquery.
Here is an example :
$(".expander").click(function () {
$(this).next(".expanded").slideToggle();
//open up the expanded- toggle the slide- if visible, slide up, if not slidedown.
});
.expanded{
height: 100px;
background : green;
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expander"><button>click to expand</button></div>
<div class="expanded"></div>
Related
Little background: The site is for a university assignment, we are not allowed to use 3rd party libraries such as bootstrap etc. I thought I had a solution but i can only get it to work for 2 buttons (showing or hiding the opposite one) but not multiple. I will have at least 10 buttons.
I have tried to research on stack overflow but could not find a solution. Here is my HTML+CSS. Home is the default page and the rest should become visible in the white space below when their button is clicked. This is a products page.
JSFIDDLE: https://jsfiddle.net/33n7yb5h/
Any help would be greatly appreciated, it does not need to be a written solution but simply pointing me in the right direction will do... I have little to no javascript knowledge so I'm not entirely sure what I should be googling in the first place...
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/store.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left">Company</li>
<li id="left">Sales</li>
<li id="left">About</li>
<li id="left">Contact</li>
<li id="right1">Cart</li>
<li id="right2" onclick="myFunction()">Geolocate</li>
</ul>
<dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>
<div id="items">
<ul>
<li id="left">Home</li>
<li id="Cars">Super Cars</li>
<li id="Cars">Topic 2</li>
</ul>
<div id="homepage">
<span><p> Welcome to the store</p></span>
</div>
<div id="showCars">
<div class="productBox">
<div class="productPicture">
</div>
</div>
</div>
</div>
</body>
</html>
ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}
body{
margin: 0px;
padding: 0px;
font-family: tahoma;
background-image: "/img/bg.jpg";
}
p{
text-align: center;
}
#items{
display: inline-block;
border: 1px solid black;
padding: 10px;
margin-top: 25px;
margin-left: 225px;
margin-right: 225px;
position: absolute;
width: 80%;
height: 80%;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background: white;
overflow: hidden;
}
.productBox{
border: 2px solid black;
width: 200px;
height: 300px;
margin-top: 5px;
text-align: center;
}
.productPicture{
border: 1px solid black;
width: 90%;
height: 150px;
margin: 0 auto;
margin-top: 5px;
padding: 5px;
display: inline-block;
}
#showCars{
display: none;
}
Here is some pseudo code if I understand correctly what you are needing: There are tons of ways to do this, and I don't have much to go on, so here is just 1 example.
<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
<ul>
<li id=IDname0></li>
<li id=IDname1></li>
<li id=IDname2></li>
</ul>
</div>
<script>
var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];
var x = 0;
Function cars()
{
// for each element in cars,
for ( x=0; x<cars.length; x++ )
{
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name ( from your <li> above
}
}
Function boats()
{
for ( x=0; x<cars.length; x++ )
{
Document.getElementById('IDname'+x).innerHtml = boats[x];
}
}
</script>
You can use a query string, and then make the buttons link to the query string parameter which checks the string and defines what each page/button will do. This will allow you to have the page html css etc mostly the same except for the parts that change on button click.
Many sites do this.
example: https://www.etsy.com/ca/search?q=wallet
I found a solution here: http://www.w3schools.com/howto/howto_js_tabs.asp for anyone else who is looking for the same thing!
I'm currently working on opening a window pop-up when I click on a link, but I have problems.
Here's my JavaScript code:
$(function() {
$('.overlay-trigger').click(function(){
$('#expose-mask').fadeIn('fast',function()
{
$('.overlay-box').css({'display':'block'});
});
});
$('#boxclose').click(function()
{
$('.overlay-box').animate({'top':'-200px'},500,function()
{
$('#expose-mask').fadeOut('fast');
});
});
});
my HTML code:
<div class="overlay-box">
<a class="boxclose" id="boxclose"></a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
<a id="help" class="overlay-trigger" href="#">Help</a>
<div id="expose-mask" style="display: none;"></div>
and my CSS:
#expose-mask
{
background-color: rgba(0, 0, 0, 0.6);
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.overlay-box
{
background-color: #FFFFFF;
display: none;
position: fixed;
top: 40%;
right: 0;
left: 0;
width: 50%;
margin: 0 auto;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
a.overlay-boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
.overlay-box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
Currently, if I click on my link, it will open the activator overlay-trigger
I'd like to remove these parts of my JavaScript code: http://prntscr.com/680zzd
I'd like that when the pop-up is open, if I click on my id #expose-mask, it closes the pop-up.
You can have a live preview here: nextgenfocus.com/test/ (click on the "Help" text at the bottom of the page to open the pop-up).
Thanks if you can help me.
the problem is there. when you click on close button , you are changing position top:-200px of overlay-box, but when again you showing the popup you need to giving top:40% position (reset) as same in css.
and you are missing close button text/image
<div class="overlay-box">
<a class="boxclose" id="boxclose">close</a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
<a id="help" class="overlay-trigger" href="#">Help</a>
<div id="expose-mask" style="display: none;"></div>
js code :
$(function() {
$('.overlay-trigger').click(function(){
$('#expose-mask').fadeIn('fast',function()
{
$('.overlay-box').css({'display':'block','top':'40%'});
});
});
$('#boxclose').click(function()
{
$('.overlay-box').animate({'top':'-200px'},100,function()
{
$('#expose-mask').fadeOut('fast');
});
});
});
see demo
I have this div here:
<div style="
width: 259px;
height: 201px;
background-color: #282c2f;
box-shadow: 0px 8px 10px #000;
border-radius: 10px;
border: 2px solid #282c2f;">SHOP</div>
That when a user hovers, the grey box needs to slide down into a teal box. So the new color is shown, and a link is ready to be clicked.
It should slide into:
<div style="
width: 259px;
height: 201px;
background-color: #00e7b4;
box-shadow: 0px 8px 10px #000;
border-radius: 10px;
border: 2px solid #282c2f;"><a href="shop.htm">SHOP</div>
Is there anything where I can see an effect similar to this working? Perhaps plugin suggestions? Not sure how to start on this.
Very similar to what I am looking for, except the black disappears as it slides out of the div: http://jsfiddle.net/bUcZg/
I believe this is what you're trying to accomplish. I haven't tested for browser compatibility, so you may want to do that and play around with it.
Basically just involved adding an additional div, and using slideDown on the new div.
<div id="newTarget" style="display:none;width:100px; height:100px; background-color:teal; border: teal solid 1px; position:absolute;">
<a id="newTargetLink" href="#">Link</a>
</div>
http://jsfiddle.net/bUcZg/22/
You can chain animations in jQuery. If I understand you correctly you could do it like this:
trigger.hover(function() {
target.animate({top: 0}).animate({opacity : 0});
}
Example: http://jsfiddle.net/bUcZg/21/
I am trying to style a button depending on whatever it was clicked or not. To be more precise, I have a button which in the normal state and hover state has some CSS styling ( not important ), and when it's clicked, a certain class is added to it ( in my case selected ).
And if that class it's added another CSS style should be applied to it. Well, I have the JavaScript ( it's more jQuery ) which adds the class I need to the button, and the CSS style. But it seems like nothing is happening.
I will paste some of the code so you can see what I'm using for that, but I'll paste the link to the actual working thing.
/*
The jQuery used for adding the class
I'm using log() to check if anything happens, but only till I make it work
*/
var iqns = $(this).find('.iqn');
$(iqns).each(function() {
var iqn = $(this).parent();
$(iqn).on('click', function() {
if($(this).hasClass('.selected')) {
log('Rmoved / Added Class');
$(this).removeClass('.selected');
$(this).addClass('.selected');
} else {
log('Added Class');
$(this).addClass('.selected');
}
});
});
<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->
<div id="509247" class="product-wrapper">
<div class="product">
<div class="description">
<div class="thumb">
<i class="icon">
<img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
<span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
<img src="assets/gfx/zoom-icon.png" alt="Zoom">
</span>
</i>
</div>
<div class="info">
<div class="sales">
<div class="icon">
<img src="assets/gfx/sales-icon.png" alt="Sales Icon">
</div>
<div class="text">
<p>2</p>
</div>
</div>
<div class="rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
<img src="assets/gfx/empty-star.png" alt="Rating">
</div>
</div>
</div>
<div class="purchase">
<div class="info">
<i class="icon">
<i class="iqn"></i>
<span class="tooltip">$ 7</span>
</i>
</div>
<div class="proceed">
<a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
</div>
</div>
</div>
</div>
/*
Some of the CSS ( it is actually LESS )
*/
.icon {
position: relative;
margin: 0px auto;
margin-top: 12px;
margin-left: 12.5px;
display: block;
cursor: pointer;
.dimensions(35px, 35px);
.background(#noise-monochrome, #323b43, #242a30);
.border(1px, 1px, 1px, 1px, #242a30);
.border-radius(25px, 25px, 25px, 25px);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
.text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);
.iqn {
position: relative;
margin: 0px auto;
display: block;
.dimensions(35px, 35px);
.background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
}
.tooltip {
position: absolute;
display: block;
top: 0px;
left: 40px;
pointer-events: none;
.dimensions(50px, 35px);
.background(#1f252a);
.border(1px, 1px, 1px, 1px, #1a1f23);
.border-radius(5px, 5px, 5px, 5px);
.font-format(Arial, 16px, normal, bold, normal);
.text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
.opacity(0);
.transition (all, 0.25s, ease-in-out);
}
.tooltip:before {
position: absolute;
top: 7.5px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #1f252a;
content: '';
z-index: 5;
}
.tooltip:after {
position: absolute;
top: 6.5px;
left: -11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid #1a1f23;
content: '';
z-index: 0;
}
&:hover {
.background(#noise-monochrome, #3c4750, #2c353c);
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
}
&:hover > .tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
&.selected {
.background(#noise-monochrome, #2c353c, #3c4750);
.shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));
.iqn {
.background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
}
.tooltip {
.opacity(1);
left: 50px;
.transition(all, 0.25s, ease-in-out);
}
}
}
But what I pasted won't be very helpful, probably the link will help more: Anchor ; navigate to the Shop page.
I would appreciate it if someone could help me out with identifying the problem, I'm not so good using the console, perhaps that would help me a lot.
You dont need to set a dot (.) to add a new class, remove and the code should work.
$(this).removeClass('selected');
Hi i am currently making a demo site from just pure html/css/javascript usually i would be using ruby and just rendering partials to solve this issue but to get some practice with javascript i though this might be an interesting challenge, and it has been! so what i have made is a block of code that has an image that is word wrapped with text. and i have positioned buttons either side of the block of content. my objective is to have those buttons hide until mouse over and onclick the content with the image will rotate to a a different image and description. and those blocks of collections will be grouped into tabs. for for instance on the home tab there will be four collections of content i could rotate through them, then the next tab would be products and if i clicked on that tab there would be three collections of content one for each product, and each would contain an image and a description..
cool so what i have so far is this here is my html:
<div class='content'>
<div class='box'>
<ul id="navigation">
<li class="two">Home</li>
<li class="three selected">Products</li>
<li class="four">Technology</li>
<li class="five">Cosulting</li>
<li class="six">Contact</li>
</ul>
<div id="sub_content">
<div class='title'>
<h3> Home </h3>
</div>
<div class="clear"></div>
<div class="arrow">
<a id="left" href=""><img src="/home/***/HTML/launch_pad/images/lefta.png">/a>
<a id="right" href=""><img src="/home/***/HTML/launch_pad/images/righta.png"></a>
</div>
<div class="clear"></div>
<div id="wall">
<div class="hide">
<div class="description">
<img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic">
<h2>Who are we?</h2>
<p>a super hero organization fighting evil all day long!! .</p>
</div>
#the description class is then repeated each with a unique image and new info in the <h2> tags and the <p> tags..
i have found several things that i have found online that have been helpful but i have conflicting javascript lib errors. so i am using the so that i can use the easing 1.3 library and for the twitter widdget i am using.
my css looks like this:
.content {
margin-left: 5%;
margin-right: 5%;
width: 1400px;
}
.box {
float: left;
width: 950px;
margin-left: 20px;
position: relative;
}
#sub_content {
background-color: white;
width: 720px;
max-height: 462px;
min-width:600px;
margin: 0px 0px 0px 40px;
padding: 15px;
border: solid 1px black;
border-radius: 8px 8px 8px 8px;
overflow-y: auto;
}
.title {
text-align: right;
text-transform: uppercase;
border: 1px solid yellow;
margin: 0px 25px 5px 25px;
padding: 5px;
}
#wall {
min-width: 300px;
margin:0px 0px 15px 15px;
width:655px;
border: 1px solid red;
float: left;
padding: 5px;
}
.description {
margin: 0px 0px 10px 10px;
padding: 5px;
width: 630px;
border:1px solid green;
float: left;
}
#decription p {
word-wrap: break-word;
}
#demoimg {
float: left;
margin: 16px 8px 0px 0px;
height: 200px;
width: 200px;
}
EDIT:
this is the javaScript i was trying:
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'description',
duration: 1500,
buttons: {next:'right',prev:'left'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('content',opt);
scroller.load();
});
//-->
</script>
but this doesnt seem to work i have a file with all my javascript in my directory that i link to..
the one that has come really close is at http://www.latenight-coding.com/mootools/classes/qscroller.html under Horizontal scroller with text and images. but it doesnt work!! which makes me pull out my hair. is there another way to just loop through the description and hide the ones that arnt selected??
any help or a better reference's would be much appreciated :D
You might consider using Jquery Cycle. It is an OUTSTANDING plugin that uses easing, and will allow you to have both a description of your content and prev/next buttons or links. You can also have multiple slideshows on one page, and it is probably not a hair-puller to have a link to one slideshow open up several, as this seems to be what you are looking for.
It works pretty easily out of the box and is highly customizable. The website has a ton of examples with code.