The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Html page 'click to close' method

Go down

Completed Html page 'click to close' method

Post by ioncube on September 8th 2011, 5:43 pm

So I am designing a page with an image floating on left side * is to be hidden when the close button is clicked. I only need a working javascript:

css part:
Code:
.arrow1{position:absolute; margin-left:10px; left:5px; top:18%;
background: url(http://i49.servimg.com/u/f49/15/79/08/97/green10.png)  no-repeat; height:128px; width:128px;
}
.arrow1 p{font-variant:small-caps;}
.arrow1 .close {
   background-image:url(http://i49.servimg.com/u/f49/15/79/08/97/close10.png);
   position:absolute; right:-18px; top:-15px;
   cursor:pointer;
   height:35px;
   width:35px;
}

html part:
Code:

<div class="arrow1" >
<a href="#"class="close"/></a><p> Click to hide this panel</p></div>

my take on javascript:

Code:
$(document).ready(function() {   
   
   //if close button is clicked
   $('.arrow1 .close').click(function (e) {
      //Cancel the link behavior
      e.preventDefault();

      $('.arrow1').hide();
   });      
   
      
   
});

Anyone...


Last edited by ioncube on September 9th 2011, 10:05 am; edited 2 times in total
avatar
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Completed Re: Html page 'click to close' method

Post by ankillien on September 8th 2011, 6:16 pm

1) Make sure you have included the core jquery.

2) <a href="#"class="close"/></a>, there is no space before 'class=', could this be the bug?

3) Here is a smaller javascript for the same...

Code:
$(function(){
$('.arrow1 .close').click(function(){
$(this).parent('.arrow1').hide();return false;});});
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Completed Re: Html page 'click to close' method

Post by ioncube on September 8th 2011, 7:22 pm

@ankillien wrote:1) Make sure you have included the core jquery.

You are right; isn't forumotion by default has the jquery?

2) <a href="#"class="close"/></a>, there is no space before 'class=', could this be the bug?
no this wasn't the problem

3) Here is a smaller javascript for the same...

Code:
$(function(){
$('.arrow1 .close').click(function(){
$(this).parent('.arrow1').hide();return false;});});
your script as well as mine script works well now; solution 1 played the game.

Next thing:



how to make text appear above or below the background img; I don't need this just for info..
avatar
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Completed Re: Html page 'click to close' method

Post by ankillien on September 9th 2011, 4:17 am

You can apply padding-top or padding-bottom to the 'p' tag to show it above or below the background.
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Completed Re: Html page 'click to close' method

Post by ioncube on September 9th 2011, 10:12 am

Another thing regarding rotation:

adding this css code will rotate it in all browsers except IE:

Code:
transform:  rotate(90deg);
-moz-transform:  rotate(90deg);
-webkit-transform:  rotate(90deg);
-o-transform:  rotate(90deg);
ms-transform:  rotate(90deg);
I added this line to make it IE9 compliant but look at the distorted result!!

Code:
transform:  rotate(90deg);
-moz-transform:  rotate(90deg);
-webkit-transform:  rotate(90deg);
-o-transform:  rotate(90deg);
ms-transform:  rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

avatar
ioncube
Forumember

Male Posts : 279
Reputation : 41
Language : eng
Location : Pakistan

http://defencedog.blogspot.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum