Solved

Div Without Picture

Posted on 2014-11-11
4
123 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
  • 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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 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