What i need: a jQuery UI framework button like the one that can be found here: / (look at Framework Icons) in a jQuery accordion header.
Live Sample: /
(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>
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>
- A live example would be entirely helpful – Zach Saucier Commented Dec 12, 2013 at 16:40
- @ZachSaucier Any tips whatsoever would be appreciated – Faarbhurtz Commented Dec 13, 2013 at 9:37
- I am not quite able to understand your question in order to help you (and assume others as well). Can you expand on what you mean by " I do not want the button/icon to be shown when the header is NOT currently selected". Any chance of drawing a wireframe of your desired end solution? – Hady Commented Dec 17, 2013 at 0:22
- @Hady Look at the first image from the left, in that stat 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. – Faarbhurtz Commented Dec 17, 2013 at 10:22
3 Answers
Reset to default 8 +25I 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.
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:
- Hovered, the class
ui-state-hoveris used - Selected, the class
ui-state-activeis used - Not Selected, none of the above two classes are used
Using 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;
}