Solved

CSS onclick, how to workaround

Posted on 2013-11-05
7
433 Views
Last Modified: 2013-11-07
Hello.

Im trying to archive zooming an image when clicking it. Im using this CSS to make it Work:

.lort img{
-webkit-transition: all 1.3s;
}
.lort:hover img{
-webkit-transform:scale(1.3);
}

Open in new window


The code above Works just GREAT..... But what if you wanted it to zoom when clicking and zoom out when clicking Again? The CSS :active selector wont do it, cause it only Works when you hold down the mouse.
There is alot tutorials for how you can change CSS with a onclick event, but still this cant do it, while i need it to transform when clicking. And Again transform back when clicking Again.

I also tried to look into using checkboxes for this purpose, but it cant help as long as CSS is missing an onclick function.

You can see my page here: http://www.mikethk.dk/ the right DK map will tranform when hovering. But i cant figure out how to make it Work with a click on the image.

Can i somehow cheat the system to think im CSS :active constantly after clicking the image, until i click it Again?

Maybe java can hold CSS :active after a click?
0
Comment
Question by:Mike Kristensen
  • 4
  • 3
7 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39625543
Easy in jQuery:

$('img').toggleClass('clicked');

Open in new window


Click an image and it will add a class, click it again and it will remove the class. Just style the classes using CSS
0
 

Author Comment

by:Mike Kristensen
ID: 39625669
See this code:

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Oplevelser</title>
		<link rel="stylesheet" type="text/css" href="moselort.css">
		<link rel="stylesheet" type="text/css" href="design-button.css">	
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
		<script>
		$(document).ready(function(){
		$("test_img").click(function(){
		$("test_img").toggleClass("test_img1");
		});
		});
		</script>
	</head>

Open in new window


And PHP
 <td colspan="2">
      <img class="test_img" src="image.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" />
    </td>

Open in new window


And CSS:
.test_img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.test_img1 {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}

Open in new window


It wont Work, im properly missunderstanding something.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39625695
OK. If you're using a class selector for your jQuery, you need to include the period. You should also use $(this) inside the function to refer to the image that received the click(). I would use an appropriate classname (such as zoomed) as well, but that's just personal choice.

Set up your jQuery like this:

$(document).ready(function(){
$(".test_img").click(function(){
	$(this).toggleClass("zoomed");
});
});

Open in new window

.test_img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.zoomed {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}

Open in new window

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Mike Kristensen
ID: 39625725
Didnt Work.... I will test some more and return.....
0
 

Author Comment

by:Mike Kristensen
ID: 39625899
So i tested with this and it worked. BUT.
<script>
		$(document).ready(function(){
		$("img.lort").click(function(){
		$(this).toggleClass("zoomed");
		});
		}); 
		</script>

Open in new window

<div >
<img class="lort" src="images/grongron_dk.png" alt="asdasd" >
</div>

Open in new window

.lort.img {
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
}
.zoomed{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
}

Open in new window



I got some files. . . index.php, global.js, name.php, moselort.css
The image that wont Work as toggle and to be toggled is one in the name.php file which is called by global.js

Here is name.php with the img class="shit" near bot.
<?php
require 'connect.php';
$er_region_syddanmark = $_POST['v_region_syddanmark']; 
$er_region_sjaelland = $_POST['v_region_sjaelland']; 
$er_region_midtjylland = $_POST['v_region_midtjylland']; 
$er_region_hovedstaden = $_POST['v_region_hovedstaden']; 
$er_region_nordjylland = $_POST['v_region_nordjylland']; 


if ($er_region_syddanmark == syddanmark) {
	$valgt_region = syddanmark;
	}
if ($er_region_sjaelland == sjaelland) {
	$valgt_region = sjaelland;
	}
if ($er_region_midtjylland == midtjylland) {
	$valgt_region = midtjylland;
	}
if ($er_region_hovedstaden == hovedstaden) {
	$valgt_region = hovedstaden;
	}
if ($er_region_nordjylland == nordjylland) {
	$valgt_region = nordjylland;
	}

	
$valgt_helsingor = $_POST['v_helsingor']; 
$valgt_gribskov = $_POST['v_gribskov']; 
$valgt_halsnaes = $_POST['v_halsnaes']; 
$valgt_fredensborg = $_POST['v_fredensborg']; 
$valgt_hillerod = $_POST['v_hillerod']; 
$valgt_frederikssund = $_POST['v_frederikssund']; 
$valgt_allerod = $_POST['v_allerod']; 
$valgt_horsholm = $_POST['v_horsholm']; 
$valgt_rudersdal = $_POST['v_rudersdal']; 
$valgt_fureso = $_POST['v_fureso']; 
$valgt_egedal = $_POST['v_egedal']; 
$valgt_ballerup = $_POST['v_ballerup']; 
$valgt_herlev = $_POST['v_herlev']; 
$valgt_gladsaxe = $_POST['v_gladsaxe']; 
$valgt_lyngby_taarnbaek = $_POST['v_lyngby_taarnbaek']; 
$valgt_gentofte = $_POST['v_gentofte']; 
$valgt_kbh = $_POST['v_kbh']; 
$valgt_frederiksberg = $_POST['v_frederiksberg']; 
$valgt_rodovre = $_POST['v_rodovre']; 
$valgt_glostrup = $_POST['v_glostrup']; 
$valgt_albertslund = $_POST['v_albertslund']; 
$valgt_hoje_taastrup = $_POST['v_hoje_taastrup']; 
$valgt_ishoj = $_POST['v_ishoj']; 
$valgt_bornholm = $_POST['v_bornholm']; 
$valgt_vallensbaek = $_POST['v_vallensbaek']; 
$valgt_brondby = $_POST['v_brondby']; 
$valgt_hvidovre = $_POST['v_hvidovre']; 
$valgt_taarnby = $_POST['v_taarnby']; 
$valgt_dragor = $_POST['v_dragor']; 

$valgt_assens = $_POST['v_assens']; //De kommuner som herunder er valgt i html filen, vil hedde kommunens navn i variablen. Eks. er Svendborg markeret i html filen, s¿il $valgt_svendborg v¿ "svendborg".
$valgt_billund = $_POST['v_billund'];
$valgt_esbjerg = $_POST['v_esbjerg'];
$valgt_fano = $_POST['v_fano'];
$valgt_fredericia = $_POST['v_fredericia'];
$valgt_faaborgmidtfyn = $_POST['v_faaborgmidtfyn'];
$valgt_haderslev = $_POST['v_haderslev'];
$valgt_hedensted = $_POST['v_hedensted'];
$valgt_horsens = $_POST['v_horsens'];
$valgt_kerteminde = $_POST['v_kerteminde'];
$valgt_kolding = $_POST['v_kolding'];
$valgt_langeland = $_POST['v_langeland'];
$valgt_middelfart = $_POST['v_middelfart'];
$valgt_nordfyn = $_POST['v_nordfyn'];
$valgt_nyborg = $_POST['v_nyborg'];
$valgt_odense = $_POST['v_odense'];
$valgt_svendborg = $_POST['v_svendborg'];
$valgt_sonderborg = $_POST['v_sonderborg'];
$valgt_tonder = $_POST['v_tonder'];
$valgt_varde = $_POST['v_varde'];
$valgt_vejen = $_POST['v_vejen'];
$valgt_vejle = $_POST['v_vejle'];
$valgt_aero = $_POST['v_aero'];
$valgt_aabenraa = $_POST['v_aabenraa'];

$valgt_faxe = $_POST['v_faxe'];
$valgt_greve = $_POST['v_greve'];
$valgt_guldborgsund = $_POST['v_guldborgsund'];
$valgt_holbaek = $_POST['v_holbaek'];
$valgt_kalundborg = $_POST['v_kalundborg'];
$valgt_koge = $_POST['v_koge'];
$valgt_lejre = $_POST['v_lejre'];
$valgt_lolland = $_POST['v_lolland'];
$valgt_naestved = $_POST['v_naestved'];
$valgt_odsherred = $_POST['v_odsherred'];
$valgt_ringsted = $_POST['v_ringsted'];
$valgt_roskilde = $_POST['v_roskilde'];
$valgt_slagelse = $_POST['v_slagelse'];
$valgt_solrod = $_POST['v_solrod'];
$valgt_soro = $_POST['v_soro'];
$valgt_stevns = $_POST['v_stevns'];
$valgt_vordingborg = $_POST['v_vordingborg'];

$valgt_favrskov = $_POST['v_favrskov'];
$valgt_herning = $_POST['v_herning'];
$valgt_hedensted = $_POST['v_hedensted'];
$valgt_horsens = $_POST['v_horsens'];
$valgt_holsterbro = $_POST['v_holsterbro'];
$valgt_ikast_brande = $_POST['v_ikast_brande'];
$valgt_lemvig = $_POST['v_lemvig'];
$valgt_norddjurs = $_POST['v_norddjurs'];
$valgt_odder = $_POST['v_odder'];
$valgt_randers = $_POST['v_randers'];
$valgt_ringkobing_skjern = $_POST['v_ringkobing_skjern'];
$valgt_samso = $_POST['v_samso'];
$valgt_silkeborg = $_POST['v_silkeborg'];
$valgt_skanderborg = $_POST['v_skanderborg'];
$valgt_skive = $_POST['v_skive'];
$valgt_struer = $_POST['v_struer'];
$valgt_syddjurs = $_POST['v_syddjurs'];
$valgt_viborg = $_POST['v_viborg'];
$valgt_aarhus = $_POST['v_aarhus'];

$valgt_bronderslev_dronninglund = $_POST['v_bronderslev_dronninglund'];
$valgt_frederikshavn = $_POST['v_frederikshavn'];
$valgt_hjorring = $_POST['v_hjorring'];
$valgt_jammerbugt = $_POST['v_jammerbugt'];
$valgt_laeso = $_POST['v_laeso'];
$valgt_mariager_fjord = $_POST['v_mariager_fjord'];
$valgt_morso = $_POST['v_morso'];
$valgt_rebild = $_POST['v_rebild'];
$valgt_thisted = $_POST['v_thisted'];
$valgt_vesthimmerland = $_POST['v_vesthimmerland'];
$valgt_aalborg = $_POST['v_aalborg'];


	
$query = "SELECT * FROM danmark WHERE _region = '$valgt_region' 

AND (_kommune = '$valgt_assens' OR _kommune = '$valgt_billund' OR _kommune = '$valgt_esbjerg' OR _kommune = '$valgt_fano' OR _kommune = '$valgt_fredericia' OR _kommune = '$valgt_faaborgmidtfyn' OR _kommune = '$valgt_haderslev' OR _kommune = '$valgt_hedensted' OR _kommune = '$valgt_horsens' OR _kommune = '$valgt_kerteminde' OR _kommune = '$valgt_kolding' OR _kommune = '$valgt_langeland' OR _kommune = '$valgt_middelfart' OR _kommune = '$valgt_nordfyn' OR _kommune = '$valgt_nyborg' OR _kommune = '$valgt_odense' OR _kommune = '$valgt_svendborg' OR _kommune = '$valgt_sonderborg' OR _kommune = '$valgt_tonder' OR _kommune = '$valgt_varde' OR _kommune = '$valgt_vejen' OR _kommune = '$valgt_vejle' OR _kommune = '$valgt_aero' OR _kommune = '$valgt_aabenraa'
OR _kommune = '$valgt_faxe' OR _kommune = '$valgt_greve' OR _kommune = '$valgt_guldborgsund' OR _kommune = '$valgt_holbaek' OR _kommune = '$valgt_kalundborg' OR _kommune = '$valgt_koge' OR _kommune = '$valgt_lejre' OR _kommune = '$valgt_lolland' OR _kommune = '$valgt_naestved' OR _kommune = '$valgt_odsherred' OR _kommune = '$valgt_ringsted' OR _kommune = '$valgt_roskilde' OR _kommune = '$valgt_slagelse' OR _kommune = '$valgt_solrod' OR _kommune = '$valgt_soro' OR _kommune = '$valgt_stevns' OR _kommune = '$valgt_vordingborg'
OR _kommune = '$valgt_favrskov' OR _kommune = '$valgt_herning' OR _kommune = '$valgt_hedensted' OR _kommune = '$valgt_horsens' OR _kommune = '$valgt_holsterbro' OR _kommune = '$valgt_ikast_brande' OR _kommune = '$valgt_lemvig' OR _kommune = '$valgt_norddjurs' OR _kommune = '$valgt_odder' OR _kommune = '$valgt_randers' OR _kommune = '$valgt_ringkobing_skjern' OR _kommune = '$valgt_samso' OR _kommune = '$valgt_silkeborg'  OR _kommune = '$valgt_skanderborg' OR _kommune = '$valgt_skive' OR _kommune = '$valgt_struer' OR _kommune = '$valgt_syddjurs' OR _kommune = '$valgt_viborg' OR _kommune = '$valgt_aarhus' 
OR _kommune = '$valgt_bronderslev_dronninglund' OR _kommune = '$valgt_frederikshavn' OR _kommune = '$valgt_hjorring' OR _kommune = '$valgt_jammerbugt' OR _kommune = '$valgt_laeso' OR _kommune = '$valgt_mariager_fjord' OR _kommune = '$valgt_morso' OR _kommune = '$valgt_rebild' OR _kommune = '$valgt_thisted' OR _kommune = '$valgt_vesthimmerland' OR _kommune = '$valgt_aalborg'
OR _kommune = '$valgt_helsingor' OR _kommune = '$valgt_gribskov' OR _kommune = '$valgt_halsnaes' OR _kommune = '$valgt_fredensborg' OR _kommune = '$valgt_hillerod' OR _kommune = '$valgt_frederikssund' OR _kommune = '$valgt_allerod' OR _kommune = '$valgt_horsholm' OR _kommune = '$valgt_rudersdal' OR _kommune = '$valgt_fureso' OR _kommune = '$valgt_egedal' OR _kommune = '$valgt_ballerup' OR _kommune = '$valgt_herlev' OR _kommune = '$valgt_gladsaxe' OR _kommune = '$valgt_lyngby_taarnbaek' OR _kommune = '$valgt_gentofte' OR _kommune = '$valgt_kbh' OR _kommune = '$valgt_frederiksberg' OR _kommune = '$valgt_rodovre' OR _kommune = '$valgt_glostrup' OR _kommune = '$valgt_albertslund' OR _kommune = '$valgt_hoje_taastrup' OR _kommune = '$valgt_ishoj' OR _kommune = '$valgt_bornholm' OR _kommune = '$valgt_vallensbaek' OR _kommune = '$valgt_brondby' OR _kommune = '$valgt_hvidovre' OR _kommune = '$valgt_taarnby' OR _kommune = '$valgt_dragor') 
 ORDER BY RAND() ";



$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
<table class="table1">
  <tr>
    <td class="table1_arrangement" colspan="5">
     <span class="bold">&nbsp <?php echo $row['_arrangement'] ; ?> </span>
    </td>
  </tr>
  <tr>
    <td class="table1_beskrivelse" colspan="5">
      <?php echo $row['_beskrivelse']; ?>
    </td>
  </tr>
  <tr>
    <td class="table1_title-Adresse">
      <span class="bold">Adresse:</span>
    </td>
    <td class="table1_addresse" colspan="2">
      <?php echo  $row['_adresse']; ?>
    </td>
    <td rowspan="2">
      <a href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="border: none; width: 41px; height: 41px;" /></a>
    </td>
    <td></td>
  </tr>
  <tr>
    <td class="table1_title-link">
      <span class="bold">Link:</span>
    </td>
    <td class="table1_link" colspan="2">
      <a href="http://<?php echo $row['_link']; ?>" target="_blank">
        <?php echo $row['_link']; ?>
      </a>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div><img class="shit"  src="image.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" /></div>
    </td>
    <td class="table1_image2" colspan="3">
      <img src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style="width: 300px; height: 168px;" />
    </td>
  </tr>
</table>
<table class="table2"></table>
<?php }

?>

Open in new window



It is kinda just copy/paste. Ofcourse i changed it to img.shit in the script. It is like it wont cross files. Sry about me might being noobies here.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39626003
OK. Few things here - each time you post your code, you've changed classes, so it's difficult to keep track!

If this is your HTML:

<img class="lort" src="images/grongron_dk.png" alt="asdasd" >

Then you bind an event to an img element with a class of lort:

$("img.lort").click(function(){

Your CSS to style that also has to target an img tag with a class of lort. Your CSS currently targets any element with 2 classes: img and lort!

.lort.img { ... } <!-- Wrong! This styles any element containing 2 classes - lort and img
img.lort { ... } <!-- Right! This styles an IMG tag with a class of lort

Because of something called CSS specificity, you will also need to change the CSS rule for zoomed by targetting the img tag as well. Your 2 CSS rules would need to be:

img.lort { ... }
img.zoomed { ... }

I have no idea how your page is built - I can't see how your files: index.php, name.php, global.js and moselort.css interact with each other. If the <img> that you want to toggle is created dynamically (i.e added to the DOM through some javascript after the page is loaded), then you will need to bind the event slightly differently. Instead of this:

$("img.lort").click(function(){
    $(this).toggleClass("zoomed");
});

Open in new window

You'll need to do this:

$(document).on('click', 'img.lort', function() {
    $(this).toggleClass("zoomed");
});

Open in new window

0
 

Author Closing Comment

by:Mike Kristensen
ID: 39630941
Worked very well. . . Had to tweak it a bit, but this made me understand the concept.

Thx. alot.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now