Ridiculous Gray borders around images - javascript

I've tried every suggested combination from previous questions in an effort to remove the gray border from my image buttons, as you can see from the code, when the image is clicked it opens a content pane below the button: border:none, border:0px, etc.
Nothing seems to be working. CSS can be extremely frustrating.
Below is the css and html I'm working with, stripped of the above fix attempts since they'd didn't seem to work. I'm hoping it is something as simple as me overlooking or screwing something up.
Any help would be appreciated.
#basemapbutton {
position:absolute;
top:5px;
right:150px;
width:20px;
height:40px;
z-index:100;
}
and:
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
toggler[(dojo.style("panel","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="panel" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery"></span>
</div>
</div>

Just add at the top of your main CSS file this:
img {
border: 0px !important;
outline: 0 !important;
}
!important will override every inline style that could be added by javascript...

the problem is the button element and/or the div element around the <img>.
#basemapbutton img, button img,
#basemapbutton:active img, button:active img
#basemapbutton:focus img, button:focus img {
border: none;
outline: 0;
}

Try use content: ""; in css style.
#basemapbutton {
content: "";
position:absolute;
top:5px;
right:150px;
width:20px;
height:40px;
z-index:100;
}

This should do:
#basemapbutton button {
border: 0px;
padding: 0px;
}

Cretae one class for the button like this <button dojoType="dijit.form.Button" baseClass="tomButton" class="remove_border" title="Switch Basemap">
Just include this point in your css for this class .remove_border{ border-style:none; padding:0px;}

Related

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

Changing div css with button click doesn't work

I have this piece of html/css and I need to change div style with js button click so my div becomes visible and clickable. I seem to do everything right but it doesn't work for some reason.
When I click that button, simply nothing happens, can anyone help?
<button type="button" id="letsgo" onclick="letitGo()">Process</button>
<div id="textualdiv">blah blah blah</div>
A script below them:
<script>
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointer-events="auto";
}
</script>
And div style in a separate CSS file:
#textualdiv {
z-index:10;
background-color:white;
margin-bottom:0%;
width:70%;
text-align:center;
height:50%;
min-width:500px;
top: 10%;
display: block;
margin: 0 auto !important;
padding:0;
position:relative;
opacity:0;
pointer-events: none;
border-style:solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
The CSS pointer-events attribute is elem.style.pointerEvents in JavaScript
Use this instead
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
JSFiddle - http://jsfiddle.net/dbxcsv9h/
Exactly, like Elipzer respond you before me. The right answer is:
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
Remember that when you wanna change a CSS property using Javascript you need to type the name of that property using camelCase.
Hope it helps you!

CSS/JQuery link hover won't fire

I'm having trouble with a jquery hover setup.. I use a slightly modified solution I found on this site (example 5a): http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
Basically my setup is supposed to work like this: hovering over the link element (#1) triggers a fadeIn on the em (#2) -element. #3 is a thumbnail image behind #1 and #2.
It worked yesterday but then I somehow managed to break it. I've tried checking for typos and removing unnecessary code but can't get it to work :(
I took the necessary code bits and put them on JSFiddle. I've never used it before so I hope I didn't do anything wrong.. Here's the url: http://jsfiddle.net/kuFDT/3/
html:
<ul class="showcase">
<li>
asd // #1
<em> doop derk </em> // #2
<div class="sample"></div> // #3
</li>
</ul>
jquery:
$(document).ready(function() {
$(".showcase a").hover(function() {
$(this).next("em").fadeIn(200);
}, function() {
$(this).next("em").fadeOut(200);
});
});
css:
.showcase a:link { width:300px; height:200px; float:left; background-color: #f2f2f2; }
.showcase { list-style: none outside none; }
.showcase li {
float:left;
z-index:-20;
position: relative;
}
.showcase em {
height:50px;
width:300px;
left:0;
top:280px;
display:none;
position:absolute;
z-index:-5;
color: white;
background-color: orange;
}
div.sample {
width:300px;
height:300px;
float:left;
background-color:#B3B3B3;
position:absolute;
top:0;
left:0;
z-index:-10;
}
Thanks for taking the time to read this long ass post!
-Ville
You didnt load the jQuery library in jsFiddle, it's working fine after loading the Lib :)
Jsfiddle Link

How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!
(source: tumblr.com)
I tried giving the div that has a set width and height overflow:hidden; but that didn't work... I searched all over and I probably just didn't word it right.
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!
HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS
.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}
#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}
#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}
Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.

IE 6 JQuery toggle class bug! Help!

While developing a new site I stop periodically and test all new functionality in IE6. It's a pain but we can't drop support yet.
I have hit a problem with JQuerys toogleClass function. I have a css styled <button> that toggles between a plus and a minus image when clicked. This works on all browsers expect IE6.
$('#searchForm #toggleButton').toggleClass('more');
$('#searchForm #toggleButton').toggleClass('less');
alert($('#toggleButton').attr('class')); <--- This displays 'less'
When first rendered the button displays the correct image. When clicked the image and all the css styles disappear. The class 'more' is removed but the class 'less' isn't applied. Placing an alert box to debug shows that JQuery thinks the 'less' class has been set properly but the browser hasn't applied it.
I have tried using different tags such as a <div> but the same problem persists.
Any help welcome
EDIT Added HTML and CSS
HTML
...
<div id="search-panel">
<form action="/Search" class="search" id="searchForm" method="post">
...
<div class="buttons">
<button type="submit" id="searchButton"></button>
<div class="loading"></div>
<button type="button" id="toggleButton" class="more"></button>
</div>
</form>
...
</div>
...
CSS
#search-panel .buttons #toggleButton.more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px; }
#search-panel .buttons #toggleButton.less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat; }
IE6 doesn't understand chaining CSS like:
div.class1.class2
Change your CSS to:
#search-panel .buttons .more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px; }
#search-panel .buttons .less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat;
And this will work
.toggleClass( className )
classNameOne or more class names
(separated by spaces) to be toggled
for each element in the matched set.
Source
Shouldn't you code be like this :
$('#toggleButton').toggleClass('more less');

Categories