When I use input append and popover at the same time then popover not working, but when I remove the appended input (by removing the input-append class) then it works.
Here is my code:
<span class="input-append">
<button class="span2" id="filter" type="text" name="filter" placeholder="Type your filter">itest</button>
<button class="btn" id="filterSubmits">Go</button>
</span>
<script>
jQuery(function() {
$('#filter').attr('data-title', 'Search tips').
attr('data-content', 'Search format: -|+').
attr('data-placement', 'bottom').
attr('data-trigger', 'focus');
$('#filter').popover('show');
})
</script>
Is there something wrong here?
If you take a look at the css for input-append, you'd see that it sets font-size to 0. Adding the following style will fix your issue:
.popover {
font-size: 14px;
}
Related
html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content
.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})
Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
It seems there is an issue with adding class dynamically to input field in SUI.
My goal is to active a disabled input on double click, then disabled it again on blur.
On https://jsfiddle.net/Greggg/e1x7jnor/2/ on first input I am adding css dynamically with success. On second input, I am trying to do the same just by adding class and it does not work.
Here is code
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
$(".disabled.transparent.test2").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
Is it a SUI issue or a miscoding?
Any help would be appreciated
Greg
The class is getting added, but the background color is getting overriden by another rule because of specificity.
Also since the class active is dynamically added, you need to use event delegation to target those elements.
/* Focus on double click on page name */
$(".disabled.transparent.test1").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').css('background-color', 'red');
});
$(".disabled.transparent.test2").dblclick(function() {
console.log('a')
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
$('.ui.input').on('blur', '.active', function() {
alert("test");
$('input').hasClass('.active').addClass('disabled transparent');
});
.ui.input input.active,
.ui.input.focus input.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<div class="column">
<div class="ui disabled transparent test1 input">
<input value="Add css work" type="text">
</div>
</div>
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
</div>
This is my HTML:
<div class="testimonial-form__field testimonial-form__company-name">
<span class="wpcf7-form-control-wrap company-name">
<input type="text" name="company-name">
</span>
::after
</div>
I'm having trouble writing a jQuery snippet to remove/hide the ::after pseudo element when the input comes in focus. Specifically traversing the DOM up and out of the input.
$('.testimonial-form__field input').css( "display", "none" );
That is about the extent of my JS knowledge. I know I need to start by selecting the input and end by applying a hide on the pseudo element. I just don't know how to write that function.
I suggest on input focus you simply add a class to the .testimonial-form__company-name div element. When that happens, you just add a CSS class to hide the ::after psuedo element.
Check out: http://jsfiddle.net/c5a19byk/
<style>
.testimonial-form__company-name::after {
content: "not focused";
display: block;
}
.testimonial-form__company-name.active::after {
display: none;
}
</style>
<div class="testimonial-form__field testimonial-form__company-name">
<span class="wpcf7-form-control-wrap company-name">
Input: <input type="text" name="company-name">
</span>
</div>
<script>
$('.testimonial-form__company-name input').focus(function () {
$(this).closest('.testimonial-form__company-name').addClass('active');
}).blur(function () {
$(this).closest('.testimonial-form__company-name').removeClass('active');
});
</script>
I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!
Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}
a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});
$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});
If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.
THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown
It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});