How do I write the following in jquery:
<div class="one">Hello I am One</div>
<div id="hello"></div>
If .one contains any text then hide hello?
Thank you very much!
Javascript:
<script>
var txt = document.getElementsByClassName('one')[0].innerText;
if(txt == "") {
document.getElementById('hello').style.display = "none";
}
</script>
jQuery:
<script>
if($('.one').text() == '') {
$('#hide').hide(0);
}
</script>
You can find the length of text in a given element, and if the length is 0 then you know it's empty.
var one = document.querySelectorAll('.one')[0];
var hello = document.getElementById('hello');
if (one.innerText.length) {
hello.style.display = 'none';
}
Alternatively, you could accomplish this with just CSS if #hello appears right after .one.
#hello {
display: none;
}
.one:empty + #hello {
display: block;
}
thank you for the answers! This worked for me:
if($('.one').text() == '') {
$('#hello').hide;
}
Related
I am using the code by Rick Sibley from the first answer on this post: Search within an accordion
Rick mentions that a search button can be added to run the script onclick, in addition to pressing enter to submit and run the search script. Can any body help me add the search 'button' functionality to this, please?
Thanks so much!
I figured it out! I feel like a genius - though I am obviously very bad at this.
Here's what I added in addition to the keyup event listener:
//Search Accordings; Highlight & Open Matching Areas ON SEARCH BUTTON CLICK
function searchBtn() {
var input, filter, i, acc, panels, txtValue, searchText, searchTitle;
input = document.getElementById("keywordSearch");
filter = input.value.toUpperCase();
acc = document.getElementsByClassName("accordion");
panels = document.getElementsByClassName("panel");
for (i = 0; i < panels.length; i++) {
for (i = 0; i < acc.length; i++) {
searchText = panels[i].textContent || panels[i].innerText;
searchTitle = acc[i].textContent || acc[i].innerText;
if (input.value !== "") {
if (searchText.toUpperCase().indexOf(filter) > -1 || searchTitle.toUpperCase().indexOf(filter) > -1) {
if (!acc[i].classList.contains("active")) {
acc[i].classList.add("active");
}
highlightIndex.apply(filter);
panels[i].style.maxHeight = panels[i].scrollHeight + "px";
panels[i].scrollIntoView({
behavior: 'smooth'
});
} else {
if (acc[i].classList.contains("active")) {
acc[i].classList.remove("active");
}
panels[i].style.maxHeight = null;
}
} else {
highlightIndex.remove();
if (acc[i].classList.contains("active")) {
acc[i].classList.remove("active");
}
panels[i].style.maxHeight = null;
}
}
}
}
With the following button added in html
<button type="submit" id="searchBtn" onclick="searchBtn();">Search</button>
i want to add an save button with a counter
i wrote a script but its not work with greasemonkey
<button type="submit" id="save" value="Save">Save</button>
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("save");
var display = document.getElementById("displayCount");
function loadStats(){
if(window.localStorage.getItem('count')){
count = window.localStorage.getItem('count')
display.innerHTML = count;
} else {
window.localStorage.setItem('count', 0)
} //Checks if data has been saved before so Count value doesnt become null.
}
window.localStorage.setItem("on_load_counter", count);
button.onclick = function(){
count++;
window.localStorage.setItem("count", count)
display.innerHTML = count;
}
</script>
You have to add html elements with javascript since Greasemonkey is intended to run scripts over web pages.
See Basic method to Add html content to the page with Greasemonkey?
How to use an icon which is not provided by WinJS? For example, use one from here.
The html looks like:
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
The png image should be 20x20 pixels with a transparent background (https://msdn.microsoft.com/en-us/library/windows/apps/hh700483.aspx). The png is set as in javascript:
document.getElementById("thatFancyButton").style.backgroundImage = url('pathOfPNGImage');
so in your case it is (notice \' \' in url()):
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'url(\'pathOfPng.png\')'}"></div>
You can also set one letter glyphs like icon: '©' and it will show it as icon.
Below is the snippet of the SplitViewCommand icon setting logic:
/// <field type="String" locid="WinJS.UI.SplitViewCommand.icon" helpKeyword="WinJS.UI.SplitViewCommand.icon">
/// Gets or sets the icon of the SplitViewCommand. This value is either one of the values of the AppBarIcon enumeration or the path of a custom PNG file.
/// </field>
icon: {
get: function () {
return this._icon;
},
set: function (value) {
this._icon = (_Icon[value] || value);
// If the icon's a single character, presume a glyph
if (this._icon && this._icon.length === 1) {
// Set the glyph
this._imageSpan.textContent = this._icon;
this._imageSpan.style.backgroundImage = "";
this._imageSpan.style.msHighContrastAdjust = "";
this._imageSpan.style.display = "";
} else if (this._icon && this._icon.length > 1) {
// Must be an image, set that
this._imageSpan.textContent = "";
this._imageSpan.style.backgroundImage = this._icon;
this._imageSpan.style.msHighContrastAdjust = "none";
this._imageSpan.style.display = "";
} else {
this._imageSpan.textContent = "";
this._imageSpan.style.backgroundImage = "";
this._imageSpan.style.msHighContrastAdjust = "";
this._imageSpan.style.display = "none";
}
}
},
If you happen to have errors with the background image size, modify win-commandimage class. I did this fix in styles to fit the image into button correctly:
.win-commandimage {
background-size:contain;
}
This is what I am doing right now, but it does not clear the text when it gains focus, nor does it repopulate with the default text when it is empty and loses focus:
//html
<input type="search" style="color:#858585" id="numbersearch" value="Search..." />
//java script
$(document).ready(function() {
var value = $("#numbersearch").val();
$("#numbersearch").focus(function() {
if(value == "Search...") {
value="";
}
});
$("#numbersearch").blur(function() {
if(value == "") {
value="Search...";
}
});
});
HTML5 placeholder
<input type="text" placeholder="this is some text" id="test" />
jQuery if you still want (Link):
$('input[type=text]').focus(function() {
if($(this).val() == $(this).attr('defaultValue')) {
$(this).val('');
}
});
$('input[type=text]').blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('defaultValue'));
}
});
I have two panels in update panel. In panel1, there is button. If I click, Panel1 will be visible =false and Panel2 will be visible=true. In Panel2, I placed SharePoint:InPutFormTextBox. It not rendering HTML toolbar and showing like below image.
<SharePoint:InputFormTextBox runat="server" ID="txtSummary" ValidationGroup="CreateCase" Rows="8" Columns="80" RichText="true" RichTextMode="Compatible" AllowHyperlink="true" TextMode="MultiLine" />
http://i700.photobucket.com/albums/ww5/vsrikanth/careersummary-1.jpg
SharePoint rich text fields start out as text areas, and some javascript in the page load event replaces them with a different control if you are using a supported browser.
With an update panel, the page isn't being loaded, so that script never gets called.
Try hiding the section using css/javascript rather than the server side visible property. That generally lets you make whatever changes you need to the form without sharepoint seeing any changes.
<SharePoint:InputFormTextBox ID="tbComment" CssClass="sp-comment-textarea" runat="server" TextMode="MultiLine" RichText="True"></SharePoint:InputFormTextBox>
<%--textbox for temporay focus - trick the IE behavior on partial submit--%>
<input type="text" id="<%= tbComment.ClientID %>_hiddenFocusInput_" style="width: 0px; height: 0px; position: absolute; top: -3000px;" />
<%--tricking code that makes the 'SharePoint:InputFormTextBox' to work correctly in udate panel on partial podtback--%>
<script id="<%= tbComment.ClientID %>_InputFormTextBoxAfterScript" type="text/javascript">
(function () {
// where possible rich textbox only
if (browseris.ie5up && (browseris.win32 || browseris.win64bit) && !IsAccessibilityFeatureEnabled()) {
// find this script element
var me = document.getElementById("<%= tbComment.ClientID %>_InputFormTextBoxAfterScript");
if (me) {
// search for script block of the rich textbox initialization
var scriptElement = me.previousSibling;
while (scriptElement && (scriptElement.nodeType != 1 || scriptElement.tagName.toLowerCase() != "script")) {
scriptElement = scriptElement.previousSibling;
}
// get the content of the found script block
var innerContent = scriptElement.text;
if (typeof innerContent == 'undefined') {
innerContent = scriptElement.innerHTML
}
// get text with function call that initializes the rich textbox
var callInitString = "";
innerContent.toString().replace(/(RTE_ConvertTextAreaToRichEdit\([^\)]+\))/ig, function (p0, p1) { callInitString = p1; });
// register on page load (partial updates also)
Sys.Application.add_load(function (sender, args) {
setTimeout(function () {
// get the toolbar of the rich textbox
var toolbar = $get("<%= tbComment.ClientID %>_toolbar");
// if not found then we should run initialization
if (!toolbar) {
// move focus to the hidden input
$get("<%= tbComment.ClientID %>_hiddenFocusInput_").focus();
// reset some global variables of the SharePoint rich textbox
window.g_aToolBarButtons = null;
window.g_fRTEFirstTimeGenerateCalled = true;
window.g_oExtendedRichTextSupport = null;
parent.g_oExtendedRichTextSupport = null;
// call the initialization code
eval(callInitString);
setTimeout(function () {
// call 'onload' code of the rich textbox
eval("RTE_TextAreaWindow_OnLoad('<%= tbComment.ClientID %>');");
}, 0);
}
}, 0);
});
}
}
})();
</script>