Menu
What i need: a jQuery UI framework button like the one that can be found here: http://jqueryui.com/themeroller/ (look at Framework Icons) in a jQuery accordion header.
Live Sample: http://www.nikollr3.three.axc.nl/
(From what i understood; a button can also be mimicked by an Achor tag with the right jQuery UI class.)
Requirements: I do not want the button/icon to be shown when the header is NOT currently selected. On the other hand, if the header is selected, and thus also it's DIV is shown, i want the icon/button to be displayed. Look at the first image from the left, in that state i do not want the "+" button to be shown. In all other images (where it is focused/selected) i do want it to be shown.This currently NOT implemented; how to do this?
-> If the button is clicked, i want statProp to be displayed, i have a function showStatProp() for this.
Issues i am having currently: Hover over 'button' is not doing anything, because currently when the header is selected, the same css is somehow applied to the button as is to the header (look at the cross color of the button: dark grey to black) (there is no seperate hover).
How to get to this? i am currently stuck as there is limited documentation/information to be found on the internet about this specific thing i am trying.
function showStatProp()
{
if(document.getElementById("statProp").style.display == "none")
{
document.getElementById("statProp").style.display = 'block';
}
else
{
document.getElementById("statProp").style.display = 'none';
}
}
HTML:
<body onkeydown="controlCheck(event)" onkeyup="clearPress()" >
<div id="application" style="position:absolute">
<div id="accordion">
<h3 id="clickStat">Stations
<span style="float:right;" class="ui-state-default ui-corner-all">
<a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a>
</span></h3>
<div id="stations">
<input type="text" id="stations_ac" onclick="this.value='';" />
<div id="selectedStationDiv">
</div>
<hr>
<div id="statProp" style="display:none;">
<p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p>
<p style="margin-top:15px">
Type:
<select id ="statTyp" style ="float:right" onchange="">
<option></option>
<option title="Test">T</option>
</select>
</p>
<p style="margin-top:15px">
Admtyp:
<select id ="admtyp" style ="float:right" onchange="FilterByToestanden()">
<option></option>
<option title="Alarm">A</option>
<option title="Alarm">D</option>
<option title="Urgent alarm">U</option>
</select>
</p>
<p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p>
<p id="devText">Text:
<input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p>
<p>
<p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p>
<button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button>
</div>
</div>
<h3 id="clickImages" onclick="listImages()">Images</h3>
<div id="imagesList" style="overflow:auto">
<ul id='imagesUL'></ul>
<button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button>
</div>
819
I guess you want something like this:
http://jsfiddle.net/mali303/gxemn34h/
I have added a CSS class 'action-button' to the button. To hide button in collapsed state use this CSS:
#accordion .action-button {
float: right;
display: none;
}
#accordion .ui-state-active .action-button {
display: inline;
}
To add hover effect:
$('#accordion .action-button').hover(
function() {
$(this).addClass('ui-state-hover');
},
function() {
$(this).removeClass('ui-state-hover');
}
);
To make the button clickable, use something like this:
$('#accordion .action-button a').click(function () {
self.location.href = $(this).attr("href");
});
Edit:
To fix the default and hover states of the button, use this CSS: http://jsfiddle.net/mali303/vf4q0eox/1/
#accordion .action-button .ui-icon {
background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
}
#accordion .action-button.ui-state-hover .ui-icon {
background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);
}
It is important when something javascript related is not working to inspect the console for errors first.
When inspecting the console on your linked demo, I observed an error:
Uncaught SyntaxError: Unexpected token ILLEGAL
It pointed to this line of code (line 1000 by inspection)
var jDescriptions= ["<br />
<b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br />
"];
The implication is that you have some sort of unicode character there which is causing the issue. Perhaps it is causing a line break. Either way, the result is an open ended string and an error which nullifies the code being examined after this line. The following code which does not execute is a majority of the scripting for the page.
I would suggest that you either manually type out this line in order to ensure the unicode is gone, or you can always try to run it through jsbeautifier.org/. Keep in mind, console errors are always a good place to start.
22
You can do a CSS only based solution.
If you inspect the HTML that gets generated from the library you are using, you will notice that when a button is:
ui-state-hover is usedui-state-active is usedUsing the above understanding, you can hide the Edit station button (plus icon) by default, and only make it visible on hover or when selected:
#clickStat span.ui-state-default {
display: none;
}
#clickStat.ui-state-hover span.ui-state-default,
#clickStat.ui-state-active span.ui-state-default {
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
