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!
Related
I have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
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.
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.
I have a website where I want the following page to function - it currently works fine on a full page refresh (since each div is populated from a database) - but I'm starting to build in AJAX to update the database behind the page without the browser leaving the page. The following image shows what I want to achieve. Refreshing the whole page can be a bit slow due to the header information and item information might have a lot of images etc.
I can get it working OK by having my form submit button write out the results in each div area, however when a user returns to the page I want it to show the latest version of the page. Is there a way to change what my submit button on the form does (i.e. when pressed - refresh the "guess" and "guess_info" div areas of the webpage?
My AJAX/Jquery for the form is:
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
guess: {
min: 0,
number: true
}
},
messages: {
guess: "Please enter a valid guess.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
process.php just takes the form inputs (e.g. item_id, user_id, guess), and updates the database for new information.
I'm also having difficulties with the CSS side of things, my header and footer are generated by wordpress, however all the dividers detailed below are my own, (which i put inside the "content" divider.
I have managed to split the "content" into 3 columns, but I'm struggling to split my middle column into the divisions shown..
So my "content" divider is 900px, so I have the "middle" as 500px and each column as 200px.
So now I'm looking to divide up my 500px column into 3 rows (which can be as long as needed), first row one column 500px, second row 2 columns, say 150px (the thumbnail is 100px wide) and 350px, the final row would be split, say 100px, 100px, 300px. Can anyone advise me on this? I've tried following a lot of CSS tutorials, but I seem to struggle getting them to sit on top of each other!! :(
Regarding the submit button there are some ways of disabling the default of it.
The first one is
<form action="whatever" method="whatever" onsubmit="return myJSFunction();return false;">
Or, for keeping your code cleaner you can do:
<form action="whatever" method="whatever" onsubmit="return myJSFunction();">
For the last one you will need to add in your myJSFunction the following code at the start of it:
if(!event) var event = window.event //to prevent browser problems
event.preventDefault();
Remember that if everything works in your js function you need to return false. If you return true it might trigger the default call of your submit button.
Once you did this you should call your AJAX request and write/override your html in js.
Regarding the css I don't see why it doesn't work so I will give you a default solution (the following divs should be placed in your "middle" container):
<div id="item_info" style="width:500px; height:50px;background-color:green"></div>
<div id="description" style="float:right;width:350px;height:100px;background-color:blue"></div>
<div id="thumbnail" style="width:150px;height:100px;background-color:red"></div>
<div id="guess_info" style="float:right;width:300px;height:100px;background-color:black"></div>
<div id="item2" style="float:left;width:100px;height:100px;background-color:yellow"></div>
<div id="guess" style="float:left;width:100px;height:100px;background-color:pink"></div>
I tested this in my editor and it seems to work. Don't bother the colors I used them to get some visibility.
Sorry for the CSS being inlined but just copy the style attribute and put in in your .css page.
If you want each of your rows (the ones that are splitted) to have the same height as their neighbourgs you'll need to change the css a little bit and use some different tricks (but you will have to chose which one could have the biggest height).
Hope this helped.
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);
}