I am using asp.net in VS 2013.
I want to display a pop up window when a user hovers over a div. I have 3 divs on the page and they are each a square of approx. 50x50. When the user brings their mouse over each one I want a different pop up box to appear.
I have been playing about with the hovermenuextender to achieve this but Im not getting anywhere as it needs a control as its target. IS there anyway to achieve this with an Ajax control?
thanks
You can try this:
step 1: Keep the three pop ups with different ids in your html with style = "display:none;position:absolute;top:50%;left:50%;". and a classname popup.
e.g.
<div class="popup" id="1" style = "display:none;position:absolute;top:50%;left:50%;"></div>
step 2: Give classname (respective ids of hidden divs) to your divs on which user will hover and a parent attribute to your divs.
e.g.
<div class="showdiv" parent="1"></div>
step 3: now write following code:
$(document).ready(function() {
$('.showdiv').mouseover(function() {
$(".popup").hide();
$("'#"+$(this).attr('parent')+"'").show();
});
});
try prop if attr doen't work.
Related
I am using two different plugins for two button. I want to move one button next to another button. It seems like two button are in two separate divs. So how can i move one button to the div of another button.
It will be better if you provide us your HTML structure for you both button divs.
Here I assume that, following are the HTML structure for both the buttons:
<div class="button1_div"><button>Retail Enquiry</button></div> // html code for button 1
And
<div class="button2_div"><button>For Product Enquiry</button></div> // html code for button 2
As you can see, I have given class to both the divs.
If,my html structure matches with yours, you can add the following jQuery code for that particular page:
jQuery(document).ready(function(){
// condition to check both the divs are exists or not
if(jQuery('.button1_div').length > 0 && jQuery('.button2_div').length > 0){
firstButton = jQuery('.button1_div').html();
jQuery('.button2_div').append(firstButton); // this line will add button at the end of div. So your result will be "For Product Enquiry" and then "Retail Enquiry".
jQuery('.button2_div').prepend(firstButton); // This lie will add button in beginning of div. So your result will be "Retail Enquiry" and then "For Product Enquiry" buttons.
jQuery('.button1_div').html(''); // this line will remove <button> from first div, but it will keep empty div
jQuery('.button1_div').remove(); // this line will remove the first div.
}
});
You can also use .insertAfter() or .insertBefore() functions as per where you want to add the button.
Again, if you provide your HTML structure, we can provide you accurate answer.
Please let me know if you need any further help in this.
Thanks!
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
In jQuery Mobile, I want to have a vertical list of items which the user can select by tapping on them.
I want:
a filter bar (so the user can first search for a subgroup of the items, and select among these)
no inset view (full width, no rounded corners)
a checkbox on right hand side which indicates whether the item is currently selected
full item surface activates the checkbox
This means to combine the behavior of a jQM thumbnail listview with filter (points 1. and 2. above) and a checkbox fieldset (points 3. and 4.).
My attemps so far fail with:
- a checkfox fieldset has no filter and is always inset
- listview does not show a jQM-styled checkbox, even when an <input> and a <label> item is used (as far as I can tell)
Any help is appreciated.
Using jQuery Mobile 1.2.0
Look at this example and add whatever you want to it. This is not your full requirement but it can be build upon.
This is original example.
<li data-icon="false">
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0"/>
</div>
Message 1
</li>
Now it is easy to create correlation between li element and its child checkbox.
To be able to activate/deactivate chechbox while interacting with li element us this code:
Long:
$('li').bind('click', function(e) {
if($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).find('input[type="checkbox"]').prop('checked', false)
} else {
$(this).find('input[type="checkbox"]').prop('checked', true)
}
});
Short:
$('li').bind('click', function(e) {
$(this).find('input[type="checkbox"]').prop('checked', ($(this).find('input[type="checkbox"]').is(':checked')) ? false : true);
});
This should work on jQuery version 1.6 and above.
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
In my webform I have a repeater control. I have a button to open pop Up also. This pop up contains all records which are coming up in the parent window. On selecting the record I have to move the scrollbar of parent window for the location of the record.
Any Suggestion?
If your popup have fixed position and you do not support IE7 and less you can use simple link anchoring:
records/#record1
where record1 is ID of the record header or container. In this case browser will focus on the target element and your popup will stay with fixed position.
Also, you can use jQuery for it. You can get position of the target eleemnt and then scroll window to this position. Here is example of scrolling: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
<div id="record1"></div>
<div id="record2"></div>
<div id="record3"></div>
and links should be like
record1
record2
record3
Below is the code to move the scrollbar in two cases.
window scroll
Repeater in div
repeater.item[0].focus();
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}