Solved

Div Without Picture

Posted on 2014-11-11
4
126 Views
Last Modified: 2014-11-11
I have a div that opens when you click on a photo.  However I want a Div to open without a photo, just a white box.  What would I change to do this?

http://www.davidschure.com/Untitled-2.html

 jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }
 
    $(document).ready(function() {
        $("#thumbnail img").click(function(e){
 
            $("#background").css({"opacity" : "0.7"})
                            .fadeIn("slow");
 
            $("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                       .center()
                       .fadeIn("slow");
 
            return false;
        });
 
        $(document).keypress(function(e){
            if(e.keyCode==27){
                $("#background").fadeOut("slow");
                $("#large").fadeOut("slow");
            }
        });
 
        $("#background").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });
 
        $("#large").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });
 
    });
</script>
<style>
img {
    border: none;
}
#thumbnail img {
    cursor: pointer;
}
#large {
    display: none;
    position: absolute;
    background: #FFFFFF;
    padding: 5px;
    z-index: 10;
    min-height: 400px;
    min-width: 600px;
    color: #336699;
}
#background{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 1;
}
</style>
</head>
<body>
<div align="center">
   <div id="thumbnail">
     <h3>Click on the image</h3>
        <a href="images/addtocartpng.png"><img src="images/addtocartpng.png" width="124" height="100" rel="OK"/></a>
     <!--p id="large"></p-->
   </div>
   <div id="large"></div>
<div id="background"></div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:DS928
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:meb_santoso
ID: 40435284
Change the following (in bold)

$(document).ready(function() {
$("#thumbnail img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
$("#large").html("hello world")
.center()
.fadeIn("slow");
return false;
}); 

Open in new window


THIS LINE >>>> $("#large").html("hello world")

Insert whatever you want the white div to contain in that line.
0
 

Author Comment

by:DS928
ID: 40435314
I changed it.  But I am getting an error in the syntax on this line...
 $("#large").html[b]("hello world")[/b]

Open in new window

0
 
LVL 5

Accepted Solution

by:
meb_santoso earned 500 total points
ID: 40435319
my bad, you should remove the [b ] and [/b ] (apparently I can't bold a text within a code section)
0
 

Author Comment

by:DS928
ID: 40435359
LOL, I thought that looked funny!  Works perfectly!  Thank you!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

737 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