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

View previous topic View next topic 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

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;});});

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..

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.

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);


ioncube
Forumember

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

http://defencedog.blogspot.com/

Back to top Go down

View previous topic View next topic Back to top


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