I apply the animate in one product which it show in the code i want to make two or more product to do the same animate when user click more info
$(document).ready(function() {
var fishPath = "http://upload.wikimedia.org/wikipedia/commons/7/77/Puffer_Fish_DSC01257.JPG";
var $con = $('#con');
var $con2 = $('#con2');
var $conImage = $('#image');
var $conLink = $('#link');
var $conLink2 = $('#link2');
$conImage.attr('src', fishPath);
$conLink2.hide(); //hide second link immediately
$conLink.click(function() {
$con2.addClass('clicked');
$con.animate({
height: "+=290",
width: "+=460"
}, 800);
$conImage.animate({
width: 220
}, 800);
$(this).fadeOut(100, function() {
$conLink2.fadeIn(800);
});
});
//hide button
$conLink2.click(function() {
$con.removeClass('conClicked');
$con.animate({
height: "-=290",
width: "-=460"
}, 800);
$conImage.animate({
width: 150
}, 800);
$(this).fadeOut(800, function() {
$conLink.fadeIn(800);
});
});
});
body {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#instructions {
font-size: smaller;
font-style: italic;
}
#image {
width: 150px;
}
#con2 {
display: inline-block;
border: 1px solid red;
padding: 10px;
}
.conClicked {
margin: 10px 5px 5px 18px;
width: 250px;
height: 260px;
}
#con {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="instructions">
I have some data in my database 'phpmyadmin' i selected all data but i want to make some animation when user click more info it increase width and height but when i do so it animate the first only not all i make it Id cuz i need one product which user
select but class make it all animated in the same time, here the code
</p>
<div id="con2">
<div id="con">
<img id="image" src="fish/'.$r['image_p'].'">
<h3>'.$r['name_p'].'</h3>
<h4>Num Of Product :'.$r['id'].'</h4>
<h4>Details: '.$r['details'].'</h4>
<h4>Amount: 1GK</h4>
<h4>Price: '.$r['price'].' P</h4>
<button id="link">MORE INFO</button>
<button id="link2">LESS INFO</button>
</div>
</div>
From this code I want to do more than one product which user click 'more info' from any product it animate.
instead of using id of the button for doing the animation, try using the class. you just need one button per product to do this. try this jsfiddle http://jsfiddle.net/98rudLkc/
Related
I am trying to implement this site to imitate a survey creation application. In this website you can add questions and then add some options to each question and edit the text in both Question Titles and Options.
But user should be able to remove an option as well. I have implemented the addition of the option but I don't know how to let the user delete a specific option. After this I can imagine it will be the same to do for deletion of questions.
I have done so each option has it's own remove option button but I just don't know how I should actually delete the current option.
If someone has done or knows how this problem should be approached I would appreciate the help.
This is my code:
const questionnaire = document.getElementById('questionaire');
newQuestion();
function newQuestion() {
questionnaire.insertAdjacentHTML('beforeend',
`<div class="question"> <div contenteditable="true">Your Question</div>
<ul> </ul>
<button class="addButton" type="button">Add Option</button>
</div>`);
newOption(questionnaire.querySelector("div.question:last-child ul"));
}
function newOption(q) {
q.insertAdjacentHTML('beforeend',
`<li class="optionName">
<span contenteditable="true">Option</span>
<input type="checkbox">
<button class="removeButton" type="button">Remove Option</button>
</li>`);
}
questionnaire.onclick = ev => {
if (ev.target.tagName === "BUTTON") {
if (ev.target.className === "addButton") {
newOption(ev.target.closest(".question").querySelector('ul'))
}
else if (ev.target.className === "removeButton") {
/* HERE I DON'T KNOW WHAT TO WRITE */
}
}
}
document.getElementById("addQuButton").onclick = newQuestion
body {
background-color: #00ffaa;
}
#myText {
margin-top: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
}
.question {
border: 3px solid black;
border-radius: 25px;
margin: 30px 200px 20px 200px;
text-align: center;
}
.question ul li {
display: block;
}
<h1 id="myText" contenteditable="true">Survey Name</h1>
<button type="button" id="addQuButton">Add Question</button>
<form>
<div id="questionaire"></div>
</form>
To remove an option just add any element with a specific class like I am adding the span tag with the class name of remove-li in your option code.
and add the condition in the click event, which you've already set to the main container to check the event's clicked target, and only remove when the event's target has the given class which in our case is remove-li.
/* Getting the questionaire container*/
const questionnaire = document.getElementById('questionaire');
/*call the 'newQuestion' to add a question with options in container */
newQuestion();
/*define the 'newQuestion' method to insert the new question html in the container at the last position */
function newQuestion() {
questionnaire.insertAdjacentHTML('beforeend',
`<div class="question">
<div contenteditable="true">Your Question</div>
<ul></ul>
<button type="button">Add Option</button>
</div>`);
/*calling the 'newOption' method where adding the option into the last child of question's unorderd list */
newOption(questionnaire.querySelector("div.question:last-child ul"));
}
/*defining the newOption method where we insert the option html into provided selector as q */
function newOption(q) {
//Add the span with a class of 'remove-li'
q.insertAdjacentHTML('beforeend',
`<li class="optionName">
<span contenteditable="true">Option</span>
<input type="checkbox"><span class="remove-li">X<span>
</li>`);
}
//set the onclick listener on main container
questionnaire.onclick = ev => {
// check the target with tag is button to add the new option only when the click on button
if (ev.target.tagName === "BUTTON") {
newOption(ev.target.closest(".question").querySelector('ul'))
}else if(ev.target.className == 'remove-li'){ //Check the clicked target is remove button for the option to remove it
ev.target.parentNode.remove();
}
}
//set the onclick event on add question button
document.getElementById("addQuButton").onclick = newQuestion
body {
background-color: #00ffaa;
}
#myText {
margin-top: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
}
.question {
border: 3px solid black;
border-radius: 25px;
margin: 30px 200px 20px 200px;
text-align: center;
}
.question ul li {
display: block;
}
/*Add some style for the remove button*/
.remove-li{
padding: 5px;
background-color:red;
color:white;
cursor: default;
}
<h1 id="myText" contenteditable="true">Survey Name</h1>
<button type="button" id="addQuButton">Add Question</button>
<form>
<div id="questionaire"></div>
</form>
Please check the added code.
May it helps to learn :)
There are 5 boxes, which can be changed from 'white'<->'yellow' colors by mouse events (mouseover, mouseout and click). There is also a blue area with text displaying the level of the clicked box.
After clicking into the third box, I got 'hard level' text in blue area and 3 boxes color in yellow.
What I need is to return it to the default level ('easy level' and first box in yellow only) by clicking the reset button.
I have been trying do this like this , but it isn't working:
resetBtn = document.querySelector('#update');
and eventlistener:
resetBtn.addEventListener('click', highlightStars(`#star1`), true)
Here is an example:
window.addEventListener('DOMContentLoaded', changeStars, false);
const resetBtn = document.querySelector('#update');
/* Change level of the game depending on user choice */
function changeStars() {
/* Displaying level text inside blue box */
const updateAltText = currentLevelIndex => {
let levelText = document.querySelector('#level-text');
/* 'currentLevelIndex + 1' replaces event 'currentElement' */
levelText.textContent = document.querySelector(`#star${currentLevelIndex + 1}`).alt;
}
/* Captcha level number - default is 1 */
const getNumber = str => Number(str.match(/\d+/)[0]) || 1;
/* Star index is always one number lower than level number (indexing rules) */
const getStarIndex = event => getNumber(event.target.id) - 1;
let stars = document.querySelectorAll('.star');
const handleStarClick = event => {
/* FIRST - blocking possibility to change star behaviour by mouse events */
gameLevel.removeEventListener('mouseover', highlightStars);
gameLevel.removeEventListener('mouseout', highlightStars);
/* SECOND - making all needed star with yellow color */
const stars = document.querySelectorAll('.star');
for (let i = 0; i <= getStarIndex(event); i++) {
stars[i].classList.add('yellow');
}
};
const highlightStars = event => {
const starIndex = getStarIndex(event);
updateAltText(starIndex);
for (let i = 1; i <= starIndex; i++) {
const star = document.querySelector(`#star${i + 1}`);
star.classList.toggle('yellow');
}
};
// resetBtn.addEventListener('click', highlightStars(`#star1`), true);
resetBtn.addEventListener('click', updateAltText(0), true);
const gameLevel = document.querySelector('.game-level');
gameLevel.addEventListener("mouseover", highlightStars);
gameLevel.addEventListener("mouseout", highlightStars);
gameLevel.addEventListener('click', handleStarClick, {once: true});
}
.stars {
display: flex;
margin: 10px auto;
width: 500px;
}
input[type='image'] {
width: 60px;
height: 60px;
border: thin solid black;
}
.yellow {
background-color: yellow;
}
.game-level {
display: flex;
width: 300px;
height: 100%;
}
.level-block {
display: flex;
width: 200px;
margin-left: 10px;
justify-content: center;
align-items: center;
border: 1px solid hsl(217, 86%, 50%);
border-radius: 25px;
background-color: hsl(212, 29%, 80%);
}
.level-block > span {
font-size: 18px;
}
.reset {
width: 80px;
height: 80px;
}
<div class="stars">
<div class="game-level">
<input type="image" class="star yellow" id="star1" src="" width="60" alt="easy level">
<input type="image" class="star" id="star2" src="" width="60" alt="normal level">
<input type="image" class="star" id="star3" src="" width="60" alt="hard level">
<input type="image" class="star" id="star4" src="" width="60" alt="very hard level">
<input type="image" class="star" id="star5" src="" width="60" alt="impossible level">
</div>
<div class="level-block">
<span id="level-text">Easy level</span>
</div>
</div>
<input type="button" class="reset" id="update" value="RESET">
The following demo uses JavaScript for click events only, all mouse events (ie hover) are pure CSS. The reset behavior simply removes .active class on all buttons then adds .active class to the first button. Instead of the first button title being displayed after a reset -- the reset button title: "Game Reset" is displayed, it might be a little confusing for users if there's no confirmation of a reset. Other behavior is included in demo that is logical and consistent such as toggling, hovering to a temporary state and clicking for a persistent state etc. Details are commented in demo.
// Reference the form
const stars = document.forms.stars;
/*
Register the form to the click event -- when a click occurs anywhere on or within the form, callback function twinkle() is
called
*/
stars.onclick = twinkle;
/**
//A -- twinkle passes a reference to the Event Object... (e)
//B1 - Two Event Object properties are used to reference:
The tag the was clicked by user: event.target
The tag registered to the event: event.currentTarget
//B2 - The HTMLFormElement property: .elements collects all form
controls into a Live HTML Collection (aka NodeList)
//C -- ui.star is a Collection of form controls with [name=star]
The brackets [] and spread operator ... converts the
NodeList into an Array
//D -- Reference the message tag. If the clicked tag was the reset
button -- for...of loop iterates through each [name=star]
and removes the class .active from all [name=star]
//E1 - Next add .active class to the default button
//E2 - Set the legend.message text to the value of clicked button
[title] attribute...
~~~~~~~
//F -- ...But if a button.star was clicked, a check to verify if
clicked tag has the .active class -- then a for...of
loop identical to the one described in line D is used to
remove any .active class.
//G -- After there are no .active, the Boolean declared in line F
determines whether the clicked tag gets the .active class
and its [title] attribute displayed or not
*/
function twinkle(e) {
const active = e.target;
const ui = e.currentTarget.elements;
const starZ = [...ui.star];
const msg = document.querySelector(".message");
if (active.matches("#clear")) {
for (let star of starZ) {
star.classList.remove("active");
}
ui.star1.classList.add('active');
msg.textContent = active.title;
} else if (active.matches(".star")) {
let status = active.classList.contains("active");
for (let star of starZ) {
star.classList.remove("active");
}
if (!status) {
active.classList.add("active");
msg.textContent = active.title;
} else {
active.classList.remove("active");
msg.textContent = "";
}
}
return false;
}
:root {
font: 400 small-caps 2.5vw/1 Arial
}
.levels {
display: table;
width: 96%;
height: auto;
border: 1px solid hsl(217, 86%, 50%);
border-radius:4px;
}
.message {
display: table-caption;
width: 40vw;
height: 6vh;
margin: 0 auto 2vh;
padding: 0.5vh 0;
border: 1px solid hsl(217, 86%, 50%);
border-radius: 1.5rem;
background-color: hsla(212, 29%, 80%, 25%);
text-align: center;
font-size: 1.5rem;
color: #0078D7;
}
#clear {
float: right;
transform: rotate(45deg);
padding: 0;
border: none;
background: none;
font-size: 3.5rem;
cursor: pointer;
}
#clear:focus {
outline: 0;
}
/*
Flex is applied to the button.star'S parent tag so the order
property can be utilized.
*/
.flex {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 70vw;
}
.star {
display: table-cell;
position: relative;
width: 16vw;
height: 24vh;
border: thin solid black;
background: #DDD;
font-size: 3.75rem;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
/*
GSC (General Sibling Combinator: ~ ) provides highlighting across
multiple buttons.
Exp. 5 buttons: [-] [-] [X] ~ [>] ~ [>]
*/
.star.active,
.star:hover,
.star.active ~ .star,
.star:hover ~ .star {
background: gold;
}
/*
HTML layout has button.star in reverse order. Applying order to
each button rectifies the order by APPEARING in order while the
HTML structure remains reversed.
*/
#star1 {
order: 1;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#star2 {
order: 2;
}
#star3 {
order: 3;
}
#star4 {
order: 4;
}
#star5 {
order: 5;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
#star1:hover,
#star1.active {
color: #5BC0DE;
}
#star2:hover,
#star2.active {
color: #FF1C8D;
}
#star3:hover,
#star3.active {
color: #00D800;
}
#star4:hover,
#star4.active {
color: #0000D5;
}
#star5:hover,
#star5.active {
color: #D50000;
}
<form id="stars" action="">
<fieldset name="levels" class="levels">
<legend class="message">Novice</legend>
<button id="clear" type="reset" title="Game Reset">๐</button>
<section class="flex">
<button id="star5" name='star' class="star" title="Master">๐</button>
<button id="star4" name='star' class="star" title="Expert">๐</button>
<button id="star3" name='star' class="star" title="Advanced">๐</button>
<button id="star2" name='star' class="star" title="Intermediate">๐</button>
<button id="star1" name='star' class="star active" title="Novice">๐</button>
</section>
</fieldset>
</form>
I'm making a site where the user will be able to search for a country and the city or cities in that country will show on the page. I'm able to show one city now for each country but if the country have two or more cities only one of the cities shows. I tried the "+=" to create several cards that will show on the page. That created some issues for me. I'm thinking that I have to use the "appendChild()" function to append each city card to a new div in the DOM. But i'm not 100% sure how to do that, with this code.
If I type in "USA" in the searchfield and USA both have LA and NY as cities. The first one shows now, but I want both to show. I've tried using document.createElement('cityCard') and append cityCard to the container where the cards show. But I did not get it to work as I wanted, I might have done some syntax mistake.
Is this the rigth mindset for this task? Or is it a better way?
Don't mind the CSS, its not done.
Link to a fiddle where all the code is.
https://jsfiddle.net/uzfb852g/12/
added the code under aswell(its the same as in the fiddle)
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Martel:400,700,900"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>FINN DITT FERIESTED!</h1>
<form id="inputForm">
<input type="text" id="sokFelt">
<button id="btn">Search</button>
<button id="allBtn">Alle steder</button>
</form>
<div id="break"></div>
<div id="searchWord"></div>
<div id="cardContainer">
<div id="cityCards">
<h2 id="country"></h2>
<h4 id="city"></h4>
<img id="cityImg">
</div>
</div>
<button id="btnTwo"></button>
<script src="content.js"></script>
</body>
</html>
CSS CODE:
body{
margin: auto;
width: 100%;
height: 100%;
}
h1{
text-align: center;
margin: 25px;
color: tomato;
font-family: 'Martel', serif;
text-shadow: 1px 2px #333;
font-weight: 900;
}
#inputForm{
text-align: center;
margin: 25px;
}
#break{
width: 80%;
margin: auto;
height: 1px;
text-align: center;
background-color: #333;
}
#btn{
padding: 5px 15px;
}
#sokFelt{
padding: 5px 15px;
}
#searchWord{
font-size: 24px;
margin: 40px;
color: #333;
font-weight: bold;
}
#cardContainer{
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#cityCards{
padding: 12px 22px;
background-color: aqua;
border-radius: 5px;
width: 20%;
height: 250px;
}
#cityImg{
width: 100%;
height: 200px;
}
#allBtn{
padding: 5px 15px;
}
JS CODE:
var form = document.getElementById('inputForm');
var input = form.querySelector('input');
var country = document.getElementById("country");
var city = document.getElementById("city");
var cityImg = document.getElementById("cityImg");
var searchWord = document.getElementById("searchWord");
/*IMAGES*/
var place = [
{land: 'Norge', by: 'Oslo', img: 'img/Oslo.jpg'},
{land: 'USA', by: 'Los Angeles', img: "img/LA.jpg"},
{land: 'USA', by: 'New York', img: "img/NewYork.jpg"},
{land: 'Tyskland', by: 'Berlin', img: 'img/berlin.jpg'},
{land: 'Frankrike', by: 'Paris', img:'img/berlin.jpg'}
];
form.addEventListener('submit', (e) => {
e.preventDefault();
for(var i = 0; i < place.length; i += 1){
if(input.value === place[i].land) {
searchWord.innerHTML = input.value;
document.createElement('cityCards');
country.innerHTML = place[i].land;
city.innerHTML = place[i].by;
cityImg.src = place[i].img;
}
}
});
document.getElementById("btnTwo").addEventListener("click", function(){
document.createElement("")
});
Try this to see the problem:
country.innerHTML += place[i].land;
city.innerHTML += place[i].by;
citycards is not an HTML element
You must use an array with divยดs (array[i]=document.createElement('div'))
Then create images with img[i] = document.createElement('img')
Set the img.src, and append this with appendChild to cardcontainer.
Using createElement and appendChild would be the right way to go, but you could also use a template tag instead.
Then you could just fill the template with the filtered information and import the template to the DOM.
Here is an example on how this could look like. You may want to take a look at the array function filter, map and forEach.
var form = document.getElementById('inputForm');
var input = form.querySelector('input');
var searchWord = document.getElementById("searchWord");
var template = document.querySelector('#cardContainer');
var getAllBtn = document.getElementById('allBtn');
var place=[{land:"Norge",by:"Oslo",img:"http://www.telegraph.co.uk/travel/destination/article137625.ece/ALTERNATES/w460/oslocityhall.jpg"},{land:"USA",by:"Los Angeles",img:"http://www.zocalopublicsquare.org/wp-content/uploads/2015/10/DistantLASkylineBIG-levinson.jpg"},{land:"USA",by:"New York",img:"https://www.city-journal.org/sites/cj/files/New-York.jpg"},{land:"Tyskland",by:"Berlin",img:"http://www.telegraph.co.uk/content/dam/Travel/Destinations/Europe/Germany/Berlin/Berlin%20cathedral-xlarge.jpg"}];
form.addEventListener('submit', (e) => {
e.preventDefault();
});
getAllBtn.addEventListener("click", function() {
// clear your container div to empty all previous added elements.
searchWord.innerHTML = "";
// filter your place data on the land property of each item.
place.filter( item => item.land === input.value )
// set the img src attr and text content for the elements in the template.
.map( item => {
template.content.getElementById("country").textContent = item.land;
template.content.getElementById("city").textContent = item.by;
template.content.getElementById("cityImg").src = item.img;
return document.importNode(template.content, true);
})
// append them to your container element.
.forEach( item => {
searchWord.appendChild(item)
})
});
body{margin:auto;width:100%;height:100%}h1{text-align:center;margin:25px;color:tomato;font-family:'Martel',serif;text-shadow:1px 2px #333;font-weight:900}#inputForm{text-align:center;margin:25px}#break{width:80%;margin:auto;height:1px;text-align:center;background-color:#333}#btn{padding:5px 15px}#sokFelt{padding:5px 15px}#searchWord{font-size:24px;margin:40px;color:#333;font-weight:700}#cardContainer{width:100%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap}#cityCards{padding:12px 22px;background-color:aqua;border-radius:5px;width:20%;height:250px}#cityImg{width:100%;height:200px}#allBtn{padding:5px 15px}
<h1>VACATION</h1>
<form id="inputForm">
<input type="text" id="sokFelt">
<button id="btn">Search</button>
<button id="allBtn">All places</button>
</form>
<div id="break"></div>
<div id="searchWord"></div>
<template id="cardContainer">
<div id="cityCards">
<h2 id="country"></h2>
<h4 id="city"></h4>
<img id="cityImg">
</div>
</template>
I've been lurking w3schools for some time and studying javaScript. I've struggled for a few days with a code of which the function is to open and then close the opened menu on click again. I couldn't do this with a single , but I've managed to it with two.
I've managed to do this with the following method:
<div id="menuClosed" style="background: blue; color: white; width: 500px; height: 50px; transition: 0.3s">
<p id="menuString" style="margin: auto; text-align:center;">
Click on the button to open the menu
</p>
<button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button>
<div>
<p style="font-size: 30px; text-align:center;">Bonefish</p>
</div>
<button id="menuButton2" onclick="changeStyle('Open')" style = "margin-left:250px; display: none;">Close</button>
</div>
<script>
function changeStyle(idMenu) {
//compresses OPEN and CLOSE buttons ID into a var
var menuButton = document.getElementById("menuButton");
var menuBotton2 = document.getElementById("menuButton2");
//Compresses menu DIV's ID into a var
var menuConfig = document.getElementById("menu" + idMenu);
//styles that will serve as factor for opening/closing the menu
var style1 = "background: blue; color: white; width: 500px; height: 50px; transition: 0.3s";
var style2 = "background: blue; color: white; width: 500px; height: 150px; transition: 0.3s";
//opens Menu and changes ID to "menuOpen"
if (idMenu === "Closed") {
menuConfig.style = style2;
menuConfig.id = "menuOpen";
menuButton.style = "display: none; margin-left:250px;";
menuButton2.style = "margin-left:250px; display: initial;"
}
//Closes menu and chages ID to "menuClosed"
if (idMenu === "Open") {
menuConfig.style = style1;
menuConfig.id = "menuClosed";
menuButton.style = "display: initial; margin-left:250px;";
menuButton2.style = "margin-left:250px; display: none;";
}
}
</script>
What I actually wanted to do, is to be able to both open and close the menu with the same button, but I can't figure out how.
I believe it can be done through changing <button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button> changeStyle('Closed') into changeStyle('Open') and making necessary adjustments, but, again, my tries on that have failed.
Thanks by advance.
If you could use jQuery and some css, it you'll get what you want
UPDATED WITH JAVASCRIPT
var divmenu=document.getElementById('menu');
function toggleMenu(btn){
if(btn.className=='open'){
btn.className='close';
divmenu.className='close';
btn.innerText='Open';
}else{
btn.className='open';
divmenu.className='open';
btn.innerText='Close';
}
}
div{
padding:10px 0;
color: white;
transition: 0.3s;
background: blue;
}
div.open{
height: 150px;
}
div.close{
height: 20px;
overflow:hidden;
}
<div id="menu" class="close">
<p id="menuString" style="margin: auto; text-align:center;">
Click on the button to open the menu
</p>
<p style="font-size: 30px; text-align:center;">Bonefish</p>
</div>
<p style="text-align:center; margin:0; padding:5px 0;"><button type="button" class="close" onclick="toggleMenu(this);">Open</button></p>
I have some data in my database 'phpmyadmin' i selected all data but i want to make some animation when user click more info it increase width and height but when i do so it animate the first only not all
i make it Id cuz i need one product which user select but class make it all animated in the same time, here the code
var $con = $('#con');
var $conImage = $('#image');
var $conLink = $('#link');
var $conLink2 = $('#link2');
$conLink.click(function(){
$('#con2').css({'float' : 'left', 'margin':'= 10px 5px 5px 18.5px', 'width':'=250px', 'height':'=260px'});
$con.animate({'height':'+=290px', 'width':'+=460px'},800);
$conImage.animate({'height':'+=90px', 'width':'+=120px'},800);
$con.css({position:'absolute'});
$conLink.fadeOut(100);
$conLink2.fadeIn(800);
});
$('#link2').click(function(){
$('#con2').css({'float' : 'left', 'margin':'= 10px 5px 5px 18.5px', 'width':'=250px', 'height':'=260px'});
$('#con').animate({'height':'-=290px', 'width':'-=460px'},800);
$('#image').animate({'height':'-=90px', 'width':'-=120px'},800);
$('#con').css({'float':'left'});
$('#link2').fadeOut(800);
$('#link').fadeIn(800);
<div id="con2">
<div id="con">
<img id="image" src="fish/'.$r['image_p'].'">
<h3>'.$r['name_p'].'</h3>
<button id="link">MORE INFO</button>
<h4>Num Of Product :'.$r['id'].'</h4>
<h4>Details: '.$r['details'].'<h4>
<h4>Amount: 1GK</h4>
<h4>Price: '.$r['price'].' P</h4>
<button id="link2">HIDE INFO</button>
</div>
</div>
i want to apply all animate in all box in 'con' not first on
I am not sure to understand exactly what you tried to explain but I found some issue in your code and I clean it up a little bit.
Notice that:
jquery relative value width:"=..." in css method do nothing special. It only make sense with += and -= as it increment and decrements the current value.
you cannot split a pixel in half 18.5px make no sense. Just choose between 18px or 19px. Floating values such 18.5 make sense in other units but not pixel (please anyone correct me if I am wrong)
$(document).ready(function() {
var fishPath = "http://upload.wikimedia.org/wikipedia/commons/7/77/Puffer_Fish_DSC01257.JPG";
var $con = $('#con');
var $con2 = $('#con2');
var $conImage = $('#image');
var $conLink = $('#link');
var $conLink2 = $('#link2');
$conImage.attr('src', fishPath);
$conLink2.hide(); //hide second link immediately
$conLink.click(function() {
$con2.addClass('clicked');
$con.animate({
height: "+=290",
width: "+=460"
}, 800);
$conImage.animate({
width: 220
}, 800);
$(this).fadeOut(100, function() {
$conLink2.fadeIn(800);
});
});
//hide button
$conLink2.click(function() {
$con.removeClass('conClicked');
$con.animate({
height: "-=290",
width: "-=460"
}, 800);
$conImage.animate({
width: 150
}, 800);
$(this).fadeOut(800, function() {
$conLink.fadeIn(800);
});
});
});
body {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#instructions {
font-size: smaller;
font-style: italic;
}
#image {
width: 150px;
}
#con2 {
display: inline-block;
border: 1px solid red;
padding: 10px;
}
.conClicked {
margin: 10px 5px 5px 18px;
width: 250px;
height: 260px;
}
#con {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="instructions">
I have some data in my database 'phpmyadmin' i selected all data but i want to make some animation when user click more info it increase width and height but when i do so it animate the first only not all i make it Id cuz i need one product which user
select but class make it all animated in the same time, here the code
</p>
<div id="con2">
<div id="con">
<img id="image" src="fish/'.$r['image_p'].'">
<h3>'.$r['name_p'].'</h3>
<h4>Num Of Product :'.$r['id'].'</h4>
<h4>Details: '.$r['details'].'</h4>
<h4>Amount: 1GK</h4>
<h4>Price: '.$r['price'].' P</h4>
<button id="link">MORE INFO</button>
<button id="link2">LESS INFO</button>
</div>
</div>