Layering Images & Click to Choose Using Javascript - javascript

So I'm making a gallery of fabrics and backgrounds for letters for a fraternity/sorority store in my college's town. If you don't know what I'm talking about, this is a fabric letter. You can see how it has a white outline (background) and a red inside (foreground). WELL, I want to make it so you can change both the foreground and background, simply by clicking it's similar image.
This is what I have so far
<script type="text/javascript">// <![CDATA[
function changeImage(filename)
{
document.mainimage.src = filename;
}// ]]></script>
with these for each fabrics:
<a href="javascript:changeImage('/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg')">
<img src="/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg"
alt="" width="100px" height="50px" /></a>
I really like how this works, but it's only good for one layer. Is there anyway I can add a layer below it, but still make it show at the top of the page? I know I'll have to use photoshop and transparency for both options, thats no problem, but I wanted to make sure I can do this before I start creating 600+ images.
I know I can play with z-index and css, but since I'm using wordpress the one example I read about here wasn't working or I didn't completely understand it, and messed up my entire page.
Also here's my tester webpage to see the current code in work. (if you click the navy&white stars image, you can see a very rough makeshift "A")
Thanks in advance!

I think I've got a solution for you.
Live Demo: http://jsfiddle.net/hM6dj/4/
More or less, you just need to create some images of the letters and leave their insides transparent.
Example
You'll notice that the area around the 'A' is white while the area within the lines of the 'A' is transparent.
Code
Then all you need to do is place this image in front of another image. The image in the background will bleed through the transparent image on top resulting in an 'A' with a pattern.
NOTE: I used data urls for the foreground letter so I wouldn't have to host the images anywhere. You can read about that here.
HTML
<div class='container'>
<div class='foreground foreground-Black'> </div>
<div class='background background-Cow'> </div>
</div>
<h2>Foreground Options</h2>
<input type='button' class='btnforeground' data-class='foreground-Black' value="Black" />
<input type='button' class='btnforeground' data-class='foreground-Red' value="Red" />
<input type='button' class='btnforeground' data-class='foreground-Green' value="Green" />
<h2>Background Options</h2>
<input type='button' class='btnbackground' data-class='background-Cow' value="Cow" />
<input type='button' class='btnbackground' data-class='background-Stars' value="Stars" />
<input type='button' class='btnbackground' data-class='background-Dots' value="Dots" />
​
JS
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
​
CSS
.container{
position:relative;
width: 200px;
height: 200px;
}
.foreground, .background{
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:absolute;
z-index:100;
}
.background{
background-repeat:repeat;
z-index:50;
}
.background-Cow{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/424.jpg);
}
.background-Stars{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/48.jpg);
}
.background-Dots{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/521.jpg);
}
/* Omitted due to StackOverflow character restrictions.
.foreground-Black{
background-image: url();
}
.foreground-Green{
background-image: url();
}
.foreground-Red{
background-image: url();
}
*/
​
EDIT
Using Google Chrome's Developer tools, it looks like you have some HTML intermixed with your JavaScript (notice the Paragraph Tags <p>, </p>).
Also I would wrap the jQuery events in a ready function (The JS Fiddle did this automatically so it wasn't obvious from the code example).
JS
$(function(){
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
});
​
EDIT2
A few things.
Your classes:
.foreground
.background
.foreground-Black
.foreground-Cow
etc...
have almost none of the properties set from my example. You should be able to take the css verbatim from the jsfiddle I provided.
You've named the container the class .viewer, but are referencing .container in your JavaScript. These elements must match for the JavaScript to be able to find the appropriate html element to update.

Related

Force hover state secondary element on click

quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.

Z-index and stacking

I'm trying to figure out out to create a event to appear in front of my home without it opening a new page. It would, for lack of a better word, expand to fill the browser. I know I'll have to do some work with z-index and javascript. The month would hover and then the user would click to see the event.
Home and event
My HTML
<div class= "month sep_box">
<h1 class= "sep">SEP</h1>
<div class= "year">2016</div>
</div>
CSS
.sep_box{
background-image: url("images/design_disrupt.svg");
background-repeat: no-repeat;
background-size: cover;
background-clip: content-box;
background-position: center;
float: left;
width: 25%;
height: 25vh;
transition:.25s ease;
}
EDIT: Screen-shoted HTML now copied
<article>
<div><h1 id="design_disruptors">
DESIGN <br />DISRUPTORS</h1></div>
<div><p class="child_day">THURSDAY</p></div>
<div><p class="child_day_number">15</p></div>
<div><p class="child_event_about">JCM 2121<br />7:00pm</p></div>
<div><p class="child_rsvp">RSVP</p></div>
<div><p class="child_desc">Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.</p>
</div>
</article>
https://jsfiddle.net/es60r7cv/
The comments aren't going to work at this point because of the character limit, so I'm going to try my best to give you some hints here. I am a little unsure as to how far along you are in your development to this point, and the intent of the design, but let's give it a shot.
Firstly, if I understand your design image correctly, you want almost the entire screen to look different except for the square that was clicked. This is going to be difficult, as you'll need to position a lot of elements in just such a way that you can have a transparency in exactly the right spot. Given your design, and how important pixel-perfection is going to be to making it work, and where you are in your development, I'm wondering if it would be ideal to simply fix the width of the whole design (no growing or shrinking with the screen).
I would also recommend you use jQuery for this project, as it will be easier for you.
To add an event listener to all your month boxes using jQuery, you would write it:
$(document).on('click', '.month', function (evt) {
// your event handling code here
}
I would give each month element an id for the month it represented, then create your overlays with a similar id. So, for example, the December month box would be <div class="month" id="december"><!--your_content--></div> and the overlay for the month could be <div class="overlay" id="decemberOverlay"><!--your_overlay_content--></div>. That way you could target it by getting the clicked month boxes id, and getting the overlay by doing that id + "Overlay".
You could fetch your overlay content on the fly using AJAX, but to reduce complexity for yourself you may just always load all overlays to the page and hide them with CSS, but also include the positioning code:
.overlay {
display: none;
z-index: 10;
position: absolute; /* this will position it to the document, or the first parent that is relatively or absolutely positioned */
top: 0;
left: 0
}
We are using absolute positioning because:
we want to be able to position the overlay directly over the original image, and not influence the flow of the rest of the document, and
z-index requires some non-static position value to be applied
Then, in your script, you would update it do be this:
$(document).on('click', '.month', function (evt) {
var clickedMonth = this.id;
var correspondingOverlay = $(clickedMonth+"Overlay");
correspondingOverlay.show();
}
Based on your fiddle and code, I think perhaps you are not very far along yet. Hopefully this gives you a bit of a head start on how to achieve your desired result.
Edit:
One last thing-- this is a cleaner way to style your markup:
<article>
<div>
<h1 id="design_disruptors">DESIGN <br />DISRUPTORS</h1>
</div>
<div>
<p class="child_day">THURSDAY</p>
</div>
<div>
<p class="child_day_number">15</p>
</div>
<div>
<p class="child_event_about">JCM 2121<br />7:00pm</p>
</div>
<div>
<p class="child_rsvp">RSVP</p>
</div>
<div>
<p class="child_desc">
Design Disruptors reveals<br />
a never-before-seen<br />
perspective on the design approaches of these<br />
companies and how they<br />
are overtaking billion dollar industries though design.
</p>
</div>
</article>
Clean HTML will be easier to read and easier to spot errors.

Remove CSS of an image (CSS is part of a generated code)

I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.

load data of hover image

First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>

Google PlusOne button has some bottom margin

I'd like to know if the issue I see is just for my site or if this is a known issue.
I have some social widgets that align pretty well, but for some reason the PlusOne is not aligned correctly.
I used Firebug to compare it with the Facebook Like widget, and according to the CSS, they are both exactly the same height and neither have margins or padding. Their css looks identical.
<div>
<fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>
<g:plusone size="medium"></g:plusone>
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&type=website&buttonText=Share%20item!&embeds=true&style=rotate"></script>
<font face='Verdana, Arial, Helvetica, sans-serif' size='1'> Email item</font>
</div>
Actually I have a link where the same thing i happening: http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/ (if necessary, reduce your window size so Fbook and G+ are on the same line)
Use this:
<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>
Had same issue. I put the Google+ code in a <div> and used CSS to limit the max-height property of <div> to 70px and it worked.
Put a div (class=froogle) around the +1 button, float them all and then style as you want. It worked for me:
.facebook-like, .twitter-share-button, .froogle {
float: left;
margin-right: 10px;
}
You could try using relative positioning, e.g. add the following CSS to the G+ button:
position: relative;
top: 5px; /* Or whatever looks right */
Although, while it may fix your problem it doesn't exactly show the cause of the issue.

Categories

Resources