We Keep Coding

How do I change img size on click, and return it to normal on toggle using javascript?

I want an image in an html file to change in size by 50% and toggle back to normal size on a second click. I tried to do it the same way I do onmouseover but it's not working. Does anyone have any ideas on how to do this in javascript?
html code -
<article id="featuredartists">
<h2>Featured Artists</h2>
<div class="artistlist group">
<ul class="group">
<li><img src="images/artists/Barot_Bellingham_tn.jpg" alt="Photo of Barot Bellingham" onclick="func3()"></li>
</ul>
</div>
</article>
external javascript -
function func3() {
x = document.getElementsByTagName("img")[11];
x.height = 50%;
x.width = 50%;
}

Here's a much simpler example making use of transforms. Just toggle a class on click.
document.querySelector("img").addEventListener("click", function(){
this.classList.toggle("half");
});
img
{
transition-duration: 0.4s;
}
img.half
{
transform: scale(0.5);
}
<img src="https://via.placeholder.com/100x100"/>
If you really want it to change the size of the element and the flow, then you can just change the width/height inside the .half class.
document.querySelector("img").addEventListener("click", function(){
this.classList.toggle("half");
});
img
{
transition-duration: 0.4s;
width: 100px;
height: 100px;
}
img.half
{
width: 50px;
height: 50px;
}
<img src="https://via.placeholder.com/100x100"/>

Rotate on Click to Show Info

This is my first question, so please go easy on me. I am trying to make a Tumblr theme in which the posts rotate on the y-axis to show the like and reblog info when you click on them. I have managed to make it so that this happens on hover using the code from here, but as I mentioned, I want to make it so that it happens on click. I've seen a couple of tutorials on how to do this with Javascript or jQuery, but I can't get them to work. So can someone please explain how to do this, in the simplest way possible/in layman's terms, because I am very new to Javascript and jQuery?
Thanks so much!
Here is my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 250px;
z-index: 1;
perspective: 1000;
}
#f1_card {
width: 250px;
transform-style: preserve-3d;
transition: all 1.3s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
.face {
position: absolute;
backface-visibility: hidden;
}
.face.back {
position:absolute; transform: rotateY(180deg);
background-color:{color:Text};
width:250px;
top:0;
height:100%;
box-sizing: border-box;
text-align: center;
}
...and here is some HTML:
{block:Photo}
{block:IndexPage}
<div id="f1_container">
<div id="f1_card">
<div class="photo"><div class="front-face"><img src="{PhotoURL-250}" alt="{PhotoAlt}"> </div></div> <div class="back face center">
<div class="perm"><span class="like"style="padding-right:7px">{LikeButton color="grey" size="13"}</span> <span class="rb" style="padding-left:5px;">{ReblogButton color="grey" size="13"}</span> <span class="noteslabel" style="padding-right:5px;">{NoteCount}</li></ol></div>
</div>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"> {/block:PermalinkPage} {/block:Photo}
Edit: Here is the link to the page: http://shimmeringdaydreams.tumblr.com. (Sorry it's kind of a mess right now; this is just where I test out my themes that I'm making, and I'm in the middle of making this one.)

If I'm not mistaken, I'm pretty sure Tumblr allows jQuery and Javascript integration.
At the head of your file, put this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
This will allow you to use jQuery. Now, all you have to do is write the click function:
var r=0;
$(document).ready(function() {
$('#Image-ID-or-DIV').click(function(){
$("#Image-ID-or-DIV").css("transition", "500ms linear all");
$("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
});
});
0) The r=0 will play a big factor in resetting the animation once it is done.
1) Document.ready is a basic jQuery function, nothing special
2) This states that when the Image (must have an ID) is clicked, a function will be executed.
3) This states that when the image is clicked, the transitions it will have will be 500 milliseconds long (subject to change to your liking) and will go smoothly.
4) The actual rotating of the image happens here. Read some documentation about this. Basically, This states that upon click, the images css will change so that it will rotate r + 180 degrees (r is 0, but it resets the animation, so this is crucial).
If you need to add more css to when the image is clicked, just add:
$("#Image-ID-or-DIV").css('[css goes here]')
But you might want to look at some documentation, as different rules apply to jQuery .css().
I hope this was of some help to you!

I think Ramsay was on the right track with :focus. Try wrapping f1_container in an anchor like this:
<a href="#" class="focus-wrapper"> <!--also stop re-using IDs - they're supposed to be unique-->
<div class="f1_container">
<!-- just pretend I copy+pasted stuff in here -->
</div>
</a>
And then remove the special anchor styles as in HTML Anchor, Disable Style:
.focus-wrapper:hover, .focus-wrapper:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then make a rule to make the change on focus:
.focus-wrapper:focus .f1_container .f1_card {
transform: rotateY(180deg);
}
And remove the browser's focus outline:
.focus-wrapper:focus {
outline:none;
}
Also, in case it's not clear, you'd take out the rule that looks like:
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
Ugly example: http://jsfiddle.net/yb9exv9b/

CSS transition only works once in FF and Chrome

I am having an issue with CSS transitions and different browsers. The following Fiddle works fine on IE (the text on the right hand side correctly fades in when you hover over the items on the left and you can switch to other items with the transition still firing on every new hover), but for some reason FF and Chrome will no longer do the transition after selecting one of the items on the left.
jsfiddle link
The CSS transition code:
.FAQItemText.active, .FAQItemTextDark.active, .solutionText.active {
-webkit-transition: opacity 1500ms ease;
-moz-transition: opacity 1500ms ease;
-o-transition: opacity 1500ms ease;
transition: opacity 1500ms ease;
opacity: 1;
}
Please can anyone help me fix it to make it work on all browsers?
Thanks

A CSS transition can't repeat. if you want something that repeat, use a CSS animation
Link : http://www.w3schools.com/css/css3_animations.asp

Your code was overly complicated and there are much simpler ways of doing what you're trying to achieve. I rewrote your JS to work like it should, altered your CSS classes and rules to better suit the purpose and cleaned up your DOM a little bit also.
Check out the code below, where I have explained what changes I've made:
$(function(){
//select all the link elements and add needed event handlers:
$(".leftSlidePanel>a")
.mouseenter(preview)
.mouseleave(preview)
.click(selectSlide);
});
function preview(event){
// This is the slide the element you clicked on links to:
var targetSlide=$(event.currentTarget).attr("href");
// Let's make a selector to select the .leftItem inside the link you hovered and our target slide:
var previewedItem=$(event.currentTarget).find(".leftItem").add(targetSlide);
// and another selector to select all the .leftItems and .FAQItemTexts aparat from the ones being targeted:
var hiddenItems=$(".leftItem, .FAQItemText").not(previewedItem);
// Next add or remove classes from our selected items depending on wheter it was mouseeneter or mouseout:
if(event.type=="mouseenter"){
previewedItem.addClass("previewed");
hiddenItems.addClass("hidden");
}else{
previewedItem.removeClass("previewed");
hiddenItems.removeClass("hidden");
}
}
function selectSlide(event){
// Prevent default behaviour of clicking a link:
event.preventDefault();
// Remove class selected from all .leftItems and .FAQItemTexts:
$(".leftItem, .FAQItemText").removeClass("selected");
// And add said class to targeted elements:
$(event.currentTarget).find(".leftItem").add($(event.currentTarget).attr("href")).addClass("selected");
}
.slideContentContainer {
width:70%;
height:100%;
min-width:1050px;
margin-left:auto;
margin-right:auto;
padding-top:80px;
}
.leftSlidePanel {
float:left;
width:30%;
padding-top:29px;
}
.rightSlidePanel {
float:right;
width:70%;
padding-top:29px;
}
.leftItem {
color: transparent;
width: 100%;
margin-top:0;
text-align: left;
padding-bottom: 23px;
font-family:"Helvetica W01 Cn" !important;
}
.leftItem h4 {
margin: 0;
padding-top:5px;
}
/* this is how your links on the left will look like when they're selected or previewed: */
.leftItem.selected, .leftItem.previewed {
color: rgb(227, 114, 22);
}
.dark.selected {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText has normally and when another item is being previewed: */
.FAQItemText, .FAQItemText.selected.hidden {
width: 95%;
opacity: 0;
float:right;
font-size: 20px;
padding-top:29px;
text-align: justify;
color: rgb(227, 114, 22);
font-family:"Helvetica W01 Cn" !important;
display:none;
}
/* Instead of creating another class with almost the same rules as another, create a subclass: */
.FAQItemText.dark {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText will have when it's either selected or previewed: */
.FAQItemText.selected, .FAQItemText.previewed{
opacity: 1;
display:block;
/* Firefox and IE support animations without vendor prefixes, so -webkit- is the only one you'll need */
-webkit-animation: fade 1.5s 1;
animation: fade 1.5s 1;
}
/* using display:block wile transitioning opacity can often doesn't give you the effect you'd want, but this can be fixed by using an animation instead: */
#-webkit-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
#-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="faqs">
<div class="slideContentContainer">
<div class="leftSlidePanel">
<div id="menuItem11" class="leftItem selected"><h4>1</h4></div>
<div id="menuItem12" class="leftItem"><h4>2</h4></div>
<div id="menuItem13" class="leftItem"><h4>3</h4></div>
<div id="menuItem14" class="leftItem"><h4>4</h4></div>
<div id="menuItem15" class="leftItem"><h4>5</h4></div>
<div id="menuItem16" class="leftItem"><h4>6</h4></div>
</div>
<div class="rightSlidePanel">
<div id="slideItem11" class="FAQItemText selected">BLAH 1 BLAH.</div>
<div id="slideItem12" class="FAQItemText">BLAH 2 BLAH.</div>
<div id="slideItem13" class="FAQItemText">BLAH 3 BLAH.</div>
<div id="slideItem14" class="FAQItemText">BLAH 4 BLAH.</div>
<div id="slideItem15" class="FAQItemText">BLAH 5 BLAH.</div>
<div id="slideItem16" class="FAQItemText">BLAH 6 BLAH.</div>
</div>
</div>
</div>

Thank you all for your suggestions, after a while of googling I came across this which seems to do the trick.
So I changed my js code from this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show();
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
To this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show(0);
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
And it now works in all browsers.

Shift down / up position fixed elements in HTML

I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.

Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform

JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.

I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>

Create a dimmed background on-click

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.

Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off

You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}

HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}