I want to know that how to add external jQuery for a particular div only.
In my Project I have added a jQuery library in header section. But it will reflect the whole project.
But I want to reflect only for singe div. If you have any idea please help me.
<!DOCTYPE html>
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter"
xmlns:j="tapestry-library:jquery">
<head>
<title>${message:index_title}</title>
<meta name="google-site-verification" content="oeiNXBU5Fev7Pbt0353wKX5SiWfiWtQGdILNY5bRqHA" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=0" charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="${context:layout/images/App_icon.png}" />
<link type="text/css" rel="stylesheet" href="${context:layout/css/style.css}" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; height:100px;}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
</style>
<script>
$(document).on("pagecreate","#pageone",function(){
$("#first_one").on("swipe",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="slider" style="height:100px; width:100%; padding:0px;
margin:0px;">
<figure id="first">
<div id="first_one"><img src="${context:layout/images/top1.jpg}"
/></div></figure>
<figure id="second">
<img src="${context:layout/images/top2.jpg}" /></figure>
<figure id="third">
<img src="${context:layout/images/top5.jpg}" /></figure>
</div>
<div id="category">
<div id="category_header">
<div id="category_style">All Videos</div>
</div>
<div id="search">
<t:form t:id="searching">
<div id="search_field"><input t:type="textfield"
t:id="search" placeholder="Search Video" size="20"/></div>
<div id="search_button"><input t:type="submit"
t:id="searchSubmit" value="Search"/></div>
</t:form>
</div>
</div>
</body>
</html>
Give your div an ID.
<div id='fart'>some stuff</div><
Then, in javascript, $("#fart").html("smell")
"#" references the ID of the element. "." references the class.
Related
I am currently trying to make a board game in the style of memory (I am self taught, and things like that help me great in understanding javascript). My question is probably basic stuff, but I am new to all of this so I appreciate any help.
My problem is that I have two cards with the same class, and with my code, when I click on first or second one, it only works on the first card.
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click', flipCard)
})
function flipCard() {
document.querySelector(".first-card").classList.toggle("flip")
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 100px;
display: flex;
}
.first-card,
.second-card {
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.first-card .front {
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front {
background: red;
width: 100%;
height: 100%;
}
.first-card .back,
.second-card .back {
background: black;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
Like I said, I am only beginner, so any help or explanation is welcome.
Thank you
It "doesn't work" because in your flipCard function you're getting the first element that matches with the className fist-card. This element will be always the same one. Just change your function to this:
function flipCard(v){
v.currentTarget.classList.toggle("flip")
}
use below
function flipCard(event){
event.target.classList.toggle("flip")
}
evt.currentTarget, which would refer to the parent in this context. So it would not be handy for you I believe.
see mdn for it
I have a sticky Ads at the footer with a HIDE button, I want when I click HIDE .stickyads content should be hidden by sliding down, but HIDE but should be appearing so as when I clcik again, the .stickyads content should appear by sliding up.
CSS:
#media (max-width: 800px) {
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
display: flex;
position: absolute;
right: 0px;
top: -30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
}
HTML Part:
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>
button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');
button.addEventListener("click", () => {
adCont.classList.toggle('visbility');
hide.classList.toggle('visbility');
show.classList.toggle('visbility');
});
.stickyadsHide {
width: 50px;
height: 50px;
}
.btn {
position: absolute;
}
.stickyadsContent,
.btn {
opacity: 0;
transition: opacity 0.5s;
}
.visbility {
opacity: 1;
transition: opacity 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class='stickyads' id='removeads'>
<div class='stickyadsHide'>
<span class="btn hide visbility">HIDE</span>
<span class="btn show">SHOW</span>
</div>
<div class='stickyadsContent visbility'>
Content Here...
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I think this is what you are looking for. slideToggle
HTML
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
CSS
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
jQuery
$('.stickyadsHide').click(function() {
$('.stickyadsContent').slideToggle();
});
Check this link
I'm new to web development and I challenged myself with this task to master JavaScript. My task is to make different divs on the page flippable on click and interact with each other based on the current status.
I would like to learn two more things:
shorten/simplify the current JS code (if possible)
Have the divs interact with each other: when 'on click' the current one opens, but if any other of them was already open, it'll close. So only one div stay open at a time.
My current code (codepen: https://codepen.io/Loomeus/pen/RwKELbx):
HTML
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var card2 = document.querySelector('.card2');
card2.addEventListener( 'click', function() {
card2.classList.toggle('is-flipped');
});
var card3 = document.querySelector('.card3');
card3.addEventListener( 'click', function() {
card3.classList.toggle('is-flipped');
});
#media screen and (min-width:650px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 200px;
height: 200px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card, .card2, .card3 {
width: 200px;
height: 200px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card2">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card3">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>
Would you be able to help me out?
Thanks!
You could simplify your code by using a common card class on all your cards. Then, you would need to remove the is-flipped class from all cards before flipping the clicked one:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, toggle the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
Fixed CodePen
Stack Snippet:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, except the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
#media screen and (min-width:400px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 100px;
height: 100px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card {
width: 100px;
height: 100px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>
sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>
I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
The position:relative bottom: 0 is not working for me. I need to position the button at the bottom of my well and in the center. I also have to place the facebook share link in the left side of it, but untill I don't place this right, I cannot plan for the facebook link now.
Below is my code:
$(document).ready(function() {
var content="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
});
});
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
}
.background{
background-color: rgba(245,245,245,0.2);
border-radius:10%;
padding-bottom: 10%;
}
#button-shape{
position:relative;
bottom: 0;
padding-left:48%;
padding-right: 48%;
}
.quote-shape{
border-radius: 10%;
width: absolute;
height: absolute;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height:30px;
width: 80px;
position:
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="container-fluid">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<div class="row" id="button-shape">
<div id="share" class="col">
<!--<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a> -->
</div>
<div class="col">
<button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Unless you have previously set bottom to another value, using position: relative along with bottom: 0 is not going to have any visual effect.
There are multiple ways to solve your problem, one of which is using position: absolute along withtransform as shown below:
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
Also, in order for the above code to work, you need to set the position of the parent to relative.
#page {
position: relative;
}
With your current HTML structure, however, using traditional ways will fail, because you have nested the button very deep inside the container which has a padding set. You need to make some serious changes to your HTML structure in order to achieve an optimal result. Most importantly put the button as an immediate child to the well, #page.
Check out a JSFiddle here or the following snippet.
Snippet:
/* ----- CSS ----- */
div.background {
background-color: rgba(245, 245, 245, 0.1);
border-radius: 10%;
padding-bottom: 5%;
}
.quote-shape {
border-radius: 10%;
}
#page {
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background {
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
/*************** MY CODE ***************/
#page {
position: relative;
/* I change the dimensions to fit in the snippet. */
width: 80%;
height: 150px;
margin: 5% auto;
}
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
<!----- HTML ----->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
</div>
<button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</body>
</html>
Notes:
Don't use space-separated ids such as click button-shape, as you're only making your life more difficult rendering the selector #click button-shape invalid, having to use [id = "click button-shape"] instead.
I have kept only the relevant parts of your code.