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');
Related
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
}
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!
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;}
I have a div that, when the mouse over event occurs should fire some javascript to change the class of a div floating over it to visible. The code works fine in IE (8) but not firefox, chrome or safari. I've attached a demo sample below:
<div class="videoImagePlaceHolder">
<div class="videoInfoPlaceHolder">
<div id="videoInfoDiv" class="videoInfoNotVisible">
<asp:LinkButton ID="viewVideoLinkButtonHeader" runat="server" Text='FILM' Font-Size="14pt" CssClass="viewVideoLinkButton" CommandName="Select" Width="100%" Height="25px"></asp:LinkButton>
TEST VIDEO
</div>
</div>
<div class="videoImage" onMouseOver="makeVisible('videoInfoDiv');makeVisible('div2')">
TEST OVER
</div>
<input id="Button1" type="button" value="button" onclick="makeVisible('videoInfoDiv')" />
<div id="div2" class="videoInfoNotVisible">
TEST DIV
</div>
<script language="javascript" type="text/javascript">
function makeVisible(element) {
document.getElementById(element).className = "videoInfoVisible";
};
function makeHidden(element) {
document.getElementById(element).className = "videoInfoNotVisible";
}
AND THE CSS FILE
.videoInfoVisible
{
vertical-align:middle;
width:165px;
padding-top:3px;
visibility:visible;
background-image: url('../images/hover_bg.png');
background-repeat: no-repeat;
height:68px;
cursor:hand;
z-index:9000;
}
.videoInfoNotVisible
{
vertical-align:middle;
width:165px;
padding-bottom:3px;
visibility:collapse;
height:68px;
cursor:hand;
z-index:0;
}
.videoImagePlaceHolder
{
vertical-align:top;
margin:auto;
position:relative;
width:165px;
height:68px;
}
.videoInfoPlaceHolder
{
background-position: center center;
width: 165px;
height: 68px;
position: absolute;
z-index: 10;
}
.videoImage
{
width:165px;
height:68px;
position:absolute;
z-index:9;
}
The demo includes a button so that you can see that the javascript / positioning is not the problem as when the button is pushed it shows the div in all browsers....
Please help!
The problem is that the z-index of .videoImage is lower than the one of .videoInfoPlaceHolder.
I moved the mouse over event handler to the parent div and now firefox, chrome etc. handle the event. I experimented with z-indexes and still it wouldn't work. Seems like firefox etc don't hear the event when one div is over another but ie lets you get away with it (thought we had got passsed all that).
I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>
Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.
Make it a float element and don't use a clearing element after it.
You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }