javascript - Apply animate in all div ID from sql -


i have data in database 'phpmyadmin' selected data want make animation when user click more info increase width , height when animate first not make id cuz need 1 product user select class make animated in same time, here 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 apply animate in box in 'con' not first on

i not sure understand tried explain found issue in code , clean little bit. notice that:

  • jquery relative value width:"=..." in css method nothing special. make sense += , -= increment , decrements current value.
  • you cannot split pixel in half 18.5px make no sense. choose between 18px or 19px. floating values such 18.5 make sense in other units not pixel (please correct me if 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          $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">    have data in database 'phpmyadmin' selected data want make animation when user click more info increase width , height when animate first not make id cuz need 1 product user    select class make animated in same time, here 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>


Comments

Post a Comment

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a
Read more

Python Tkinter keyboard using bind -

i have problem using bind option can click button in keyboard, , call function once key pressed. tried taking other codes have similar purpose , saw i'm doing pretty same, though still have problem must've missed. thankful if me this. here's code: # -*- coding: utf-8 -*- #imports tkinter import * pil import imagetk, image import time import tkmessagebox #===========================================================================================================================================# #tkinter class class app(frame): def __init__(self, master=none): frame.__init__(self, master) self.pack() #===========================================================================================================================================# #game pieces classes class board: def __init__(self, rows = 7, columns = 6, picture_height = none, picture_width = none): self.rows = rows self.columns = columns self.picture
Read more

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -

i'm trying set demo selenium grid. have digital ocean ubuntu 14.02 droplet. (i have 2 , tried set using 2 different machines got nowhere.) i'm trying run hub , node both locally. here input both hub, node, , nmap results. https://gist.github.com/mekhami/d5bbecca5ff0de9d2dc9 so, node starting tcp connection reset , port it's supposed operate on closed. i have had no luck in number of different options , configurations work. but... of course, worked randomly once. don't know why, don't know did, know 1 brief moment, node connected , saw on grid console. tried run test , went down again , i've never seen come up. please let me know more information can provide. update: randomly came online again. don't know happened, might related timeout or time_wait or going on. this because vm/server not have enough entropy available. to resolve problem, install haveged (or other similar things). the instructions of how install haveged on ubu
Read more