Welcome to WebmasterWorld Guest from 3.214.184.196

Forum Moderators: not2easy

Message Too Old, No Replies

Contain javascript within a CSS Rounded Corner contain

     
6:06 pm on Feb 5, 2019 (gmt 0)

New User from US 

10+ Year Member

joined:Nov 16, 2006
posts: 6
votes: 0


I would like to contain this javascript with a CSS rounded corner container with a white background as I can't modify the javascript.


Here is the javascript:

<div>
<script type="text/javascript">
var affiliate_SiteName = "example.net";
</script>
<script type="text/javascript" src="http://www.example.com/widget/">
</script>
<noscript>
<a href="http://www.example.com">Widget for the Day</a>
</noscript>
</div>




[edited by: not2easy at 10:16 pm (utc) on Feb 5, 2019]
[edit reason] snipped link, exemplified [/edit]

10:23 pm on Feb 5, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4504
votes: 347


To know the best way to style your <div> it helps to know whether you are using inline styling or a style sheet. It also helps to know the document type - is this in html5, xhtml, html4.1 or something completely different like WordPress or Dreamweaver code?

Basically, you need to give the containing div a class name, then tell that class how it should look, either inline or within your stylesheet. With more information you can get a quick answer.
10:29 pm on Feb 5, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15867
votes: 869


To make it clearer what you’re trying to do: Does the script involve some type of user action, like clicking or hovering, and you only want the script to fire when the user is within the rounded-edged area, and not within the leftover corners of the bounding box?
10:50 pm on Feb 5, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Sept 26, 2018
posts:76
votes: 20


This will work as a starting point for you...



<style>
.container {
background-color: white;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>

<div class="container">
( Your javascript here )
</div>

12:04 am on Feb 6, 2019 (gmt 0)

New User from US 

10+ Year Member

joined:Nov 16, 2006
posts: 6
votes: 0


That works flawlessly. I did change the border to 10px solid gold and the border-radius to 25px

Thanks for your help