I want to open my dialog box at the center of the page, here is my code:
$(function() {
$('#app').button().click(function(){ //bind handlers
$("#somediv").load('<?php echo CController::createUrl('jobs/apply', array('idJob'=>1)); ?>').dialog({modal:true});
$("#somediv").dialog('option', 'position', 'center');
});
});
Add the CSS rule: margin: 0 auto; to your dialog box.
If you want it to pop over your web page, then place your dialog box inside a div that has the following attributes:
div.your-class {
position: absolute;
width: 100%;
}
Then add margin: 0 auto;to your dialog box div
From jquery docs - http://api.jqueryui.com/dialog/#option-position - that option you're trying to use is already in "center/center" position.
Default: { my: "center", at: "center", of: window }
You should look for a problem in your css files and/or use the answer provided by Valentin Mercier.
Related
Im having this proplem with an iframe that from JavaScript uses .load every 20 sec, and its allways moving the site in a short sec like pops up and then down,
are there somehow i can get it to hold its position??
You can see what i mean by looking at the ads on this site - http://www.pixel.tv/
the code im using to refresh it is this one
var adforsidetop = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('/adsrefresh/forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
So how can i get it to hold the frame ? without its popping the site
Problem with this is that when element is faded out element css display: is set to none, one way is to add code to set iFrame visibility: hidden or you can simply crate div that contains your iFrame
<div id="iframe-container">
<iframe></iframe>
</div>
and set css for div to be same as iframe
#iframe-container {
height: xxxpx;
width: xxxpx;
}
change your style in screen.css as under:
.fAdvertisement.fBanner {
max-width: 728px;
max-height: 90px;
height: 90px
margin: 30px auto 0;
}
I have an annoying problem, I want the bootstrap button to be fixed in size. At the moment when I scroll over the bootstrap button it resizes the entire button. I use javascript to change the text (mouseover and mouseout). How can I disable this so the button remains the same size and only the text changes?
Example button:
<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>
Javascript:
$('body').on('mouseover', '#Success', function (e) {
$(this).removeClass("btn-success");
$(this).addClass("btn-danger");
$(this).text('Deactivate?');
});
$('body').on('mouseover', '#Warning', function (e) {
$(this).removeClass("btn-warning");
$(this).addClass("btn-success");
$(this).text('Activate?');
});
If the visible width of the 2 text labels is different, the button has to change size to accommodate the text.
You should set a fixed size of the button via CSS that is big enough to fit either text label:
#Warning {
width: 200px;
}
Without seeing more of your markup, it's difficult to know how this affects other layout elements.
You could try giving the button an auto margin in the horizontal:
#Warning {
width: 200px;
margin: 0 auto;
}
Or it might be that you need to explicitly center the buttons in it's container:
.class-name-of-the-buttons-parent-container {
text-align: center;
}
I suggest giving the button a fixed width that's enough for both states and removing the horizontal paddings. Optionally you can give it text-align:center
Freeze the button's width and height during the mouseover event. Also, set its padding to 0 to keep the text centered:
$('body')
.on('mouseover', '#Warning', function (e) {
$(this).css({
width: $(this).outerWidth(),
height: $(this).outerHeight(),
padding: 0
});
$(this).text('Activate?');
})
.on('mouseout', '#Warning', function (e) {
$(this).text('Pending');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>
You should add an additional CSS class that overrides the Bootstrap defaults to the button. Something like ...
.fixed_size_button {
width: 200px;
}
In some cases you might need to add !important to actually override prior CSS settings, especially since Bootstrap itself uses a lot of !important statements. E.g.
.fixed_size_button {
width: 200px !important;
}
But you should avoid this as much as possible since it is difficult to maintain.
For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.
The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/
Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>
I saw on my local news website a feature like this:
Where the left div is sticked to main div, AND on scroll AND on windows resize it stays sticked there, and on scroll it moves up/down also sticked to main div
Sorry for bad english / explanation ( but I think you understood ).
You can see what I want to get in this link:
http://rus.delfi.lv/news/daily/abroad/papa-rimskij-obratilsya-s-tradicionnym-rozhdestvenskim-poslaniem-k-pastve.d?id=43988560 if you are not using any Adblock :)
Is there any special jquery plugin or it is achieved with simple CSS?
From my website, on the left is Facebook image that scrolls with page and on mouseover (jquery) it expands and shows the plugin box:
HTML
<div id="fbwindow">
<div class="fb-like-box" data-href="http://www.facebook.com/.../" data-width="292" data-show-faces="false" data-stream="true" data-show-border="true" data-header="true"></div>
</div>
CSS
#fbwindow { position: fixed;top:50%;margin-top:-200px;left:-292px;width:323px;height: 265px;z-index: 1000;text-align: left; }
#fbwindow div.fb-like-box { background: #FFF; }
#fbwindow > a { display: block;float: right;width: 31px;height: 187px;background: url('/layout/fb-window.png') no-repeat; }
(optional / not needed rollover effect) jQuery
$('#fbwindow_a').mouseenter(function() {
$("#fbwindow").stop().animate({
left: '0'
}, 100, function() {
//$(this).removeClass("left").addClass("right");
});
});
$('#fbwindow').mouseleave(function() {
$("#fbwindow").stop().animate({
left: '-292px'
}, 50, function() {
//$(this).removeClass("right").addClass("left");
});
});
Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}
See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/
CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">
You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/
Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.
I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});