I have numerous websites that are on a "dev" site meaning that it is dummy data and not all functionality works. What happens is that I have this function in my document.ready() that is supposed to find the html for the popup box and add a class to it, which gives the popup box a little blue header bar.
Function:
$("document").ready(
function(){
//loadSummary();
NOT_AVAILABLE_ALERT = $("#modalMessageAlert").dialog(
{
position: "center",
resizable: false,
bgiframe: true,
autoOpen: false,
width: 250,
height: 200,
draggable: false,
modal: true,
close:function(event,ui){
},
open:function(event,ui){
}
});
modifyModalHeader("modalMessageAlert","demo_dialog_header");
}
);
function modifyModalHeader(id,className){
var refs = $("#"+id).prev();
var ref = refs.eq(0);
ref.addClass(className);
}
function navigateDemo() {
NOT_AVAILABLE_ALERT.dialog("open");
}
HTML
<div id="tempXML" ></div>
<div id="modalMessageAlert"style="left:-200px; display:none">
<h3>This feature is not available in this demo household.</h3>
<input style="margin-bottom: 15px" type="button" Value="Close" onclick="NOT_AVAILABLE_ALERT.dialog('close');"/>
</div>
HTML link:
<input type="submit" onclick="javascript:navigateDemo();return false;" value="Save" id="save"/>
CSS
#modalMessageAlert {
background-color:#fff;
cursor:pointer;
padding: 10px 10px 10px 10px;
text-align:center;
vertical-align:middle;
}
.demo_dialog_header {
background-image:url(/backoffice/Prospects/APP360/images/demo_modal_header.gif)
}
If i understand correctly the modifyModalHeader function is supposed to find the tempXML div using the .prev() functionality and add that class to the tempXML div, and then when a user clicks the "submit" aka save button it shows the dialog, the dialog shows fine, just without the referenced image as the background-image, which just creates a solid blue line across the top about 15px wide. This EXACT same functionality and references work on pages included in the same directories just fine, but for some reason i can't get this to load correctly.
Any help is greatly appreciated.
-NickG
Turns out that i had conflicting style sheets that were overriding the class because i used some JQuery calendar extenders and they were being referenced as ui-widgets as does that popup.
Related
I wondering if there is a method to add text to a poptrox popup. I know I can use the caption attribute to add caption text but that's not what i want. I want to add a div or text element to the pop up it self so when the user clicks on the image, a pop up shows up to describe an image. Is there any why to do this?
I'm following the poptrox github form, I tried using Iframes and the other sources it allows but noting is working the way i want it
In the HTML markup for the gallery items, add a div with the class "caption" inside the anchor element that links to the full-size image.
<a href="image1.jpg">
<img src="thumb1.jpg">
<div class="caption">Caption for Image 1</div>
</a>
In the jQuery code that initializes the Poptrox plugin, add the caption class to the list of classes that should be cloned when creating the lightbox.
$('.gallery').poptrox({
caption: function($a) { return $a.next('.caption').text(); },
overlayColor: '#2c2c2c',
overlayOpacity: 0.85,
popupCloserText: '',
popupLoaderText: '',
selector: '.thumb > a',
usePopupCaption: true,
usePopupDefaultStyling: false,
usePopupNav: true
});
You can then add CSS to style the caption as you desire.
.caption {
background-color: rgba(0,0,0,0.7);
bottom: 0;
color: #fff;
padding: 10px;
position: absolute;
width: 100%;
}
I am very new to JS/JQuery/JQueryUI but have made a few things work on a new site I'm working on.
I've set up a basic navbar where a .click makes different divs slide into view with .show while the other three pop out of existence with .hide. I was extremely proud of myself even though this is super basic.
My issue is that one of these divs contains a YouTube iframe. To get it to stop playing when another div is shown, I just remove the src with .attr (clunky, I know). This means that since the source is re-appended to the iframe each time, going back to that div is slower than I want it to be, and jQuery stutters.
I've put a stripped down version into a JSFiddle. Any suggestions on improving the performance would be greatly appreciated!
PS: The video I have as a placeholder is hilarious and you should enjoy it! :)
HTML:
<div class="button" id="home">1</div>
<div class="button" id="about">2</div>
<div class="button" id="latest">3</div>
<div class="button" id="contact">4</div>
<div class="home"><iframe class="video" id="homeVid"
src="https://www.youtube.com/embed/gspaoaecNAg?controls=0?showinfo=0?rel=0?enablejsapi=1"
frameborder="0" allowfullscreen></iframe></div>
<div class="content about"></div>
<div class="content latest"></div>
<div class="content contact"></div>
CSS
.content {
width: 600px;
height: 480px;
display: none;
clear:both
}
.home, .video {
width: 600px;
height: 480px;
display: flex;
clear:both;
background-color: #CCC
}
.about {background-color: #F00}
.latest {background-color: #0F0}
.contact {background-color: #00F}
.button {
width: 25px;
height: 25px;
border: 1px solid black
}
JavaScript
$(document).ready(function() {
var urlhome = $('#homeVid').attr('src');
$('#home').click(function() {
$('.home').show('slide', {direction: 'right', easing: 'swing'}, 400);
$('.about, .contact, .latest').hide(0);
$('#homeVid').attr('src', urlhome);
});
$('#about').click(function() {
$('.about').show('slide', {direction: 'right', easing: 'swing'}, 400);
$('.home, .contact, .latest').hide(0);
$('#homeVid').attr('src', ' ');
});
$('#latest').click(function() {
$('.latest').show('slide', {direction: 'right', easing: 'swing'}, 400);
$('.home, .contact, .about').hide(0);
$('#homeVid').attr('src', ' ');
});
$('#contact').click(function() {
$('.contact').show('slide', {direction: 'right', easing: 'swing'}, 400);
$('.home, .about, .latest').hide(0);
$('#homeVid').attr('src', ' ');
});
});
Indeed, adding and removing the iframe is costly in terms of performance. Instead we must stop the playback and hide it.
This necessitates to insert it differently into the document, using the YouTube Player API Reference for iframe Embeds. Then we do this:
HTML
<div class="content home">
<div id="player"></div>
</div>
var player;
JavaScript
$(window).load(function(){
player = new YT.Player('player', {
height: '480',
width: '600',
videoId: 'gspaoaecNAg',
});
});
We can simply use player.stopVideo(); whenever we hide the home element. But if only it was so simple.
Using jQuery's hide() has side effects, because the way it hides elements is by setting their CSS to display:none which effectively removes them from the document. This destroys the iframe and recreates it on show(), which presents the same performance issue as before.
We need something more subtle, hiding the elements by putting them aside. For this we use positionning:
.hidden {
position:fixed;
left:200%;
}
This puts them further on the right of the document, outside the viewport and since the units are relative, it can never be vsible no matter how much we stretch the window. This necessitates a few changes in HTML, plus some others for an optimization I will detail further below.
HTML:
<div class="button" id="home">1</div>
<div class="button" id="about">2</div>
<div class="button" id="latest">3</div>
<div class="button" id="contact">4</div>
<div class="content home">
<div id="player"></div>
</div>
<div class="content about hidden"></div>
<div class="content latest hidden"></div>
<div class="content contact hidden"></div>
We have added the class hidden to all elements not visible at the start. We also added a class describing the elements themselves and set to the id of their corresponding button. And we have the content class in each element.
JavaScript:
var player;
$(window).load(function(){
player = new YT.Player('player', {
height: '480',
width: '600',
videoId: 'gspaoaecNAg',
});
});
$(document).ready(function() {
var all = $('.content');
$('.button').click(function() {
all.addClass('hidden');
player.stopVideo();
$('.'+this.id).animate({
'left': '0px',
easing: 'swing'
}, 400, function(){
$(this).removeClass('hidden')
.removeAttr('style');
});
});
});
This has been optimized to avoid checking each element individually. The first part has been explained before, here is how the rest goes:
var all = $('.content');
This selects all the .content elements and keeps them referenced outside the callback in the variable all, so we only have to do this once when the document loads.
We create the callback on all button elements. The next step assumes a click event has been received.
We set all .content elements to hidden. Effectively this should only affect the one currently not hidden.
We stop the video. This will only affect the embedded iframe and we don't bother checking which .content element is active because stopping an already stopped video does nothing special.
Using the id of the button that triggered the click event, we select the corresponding .content element.
We replace show() with animate() and use it to modify the CSS property that is used in the class hidden. This will slide the element from its hidden position to it's normal position.
The animation has a callback executed when it's done. We use it to first remove the hidden class from our now visible element, then to remove the style attribute in which our animation has set left:0px;, as leaving this there would interfere later.
And we're done. This should now be smooth. A demo is available on this JSFiddle.
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.
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.
I'm displaying two buttons and a checkbox on an image as can be seen in the following
These buttons and the checkbox are shown only when the mouse pointer is positioned over the image. They disappear when the mouse pointer is moved away.
This effect is achieved by the following simple jQuery code.
jQuery(function(){
jQuery(".the-buttons").hide();
jQuery('.show-image').hover(function(){
jQuery(this).find('.the-buttons').fadeIn(600);
},function(){
jQuery(this).find('.the-buttons').fadeOut(300);
});
});
The associated HTML/CSS is as follows.
<span class="show-image" style="position: relative;float:left;margin:5px;">
<a href="../product_images/large/3562298873030291049_Winter.jpg">
<img src="../product_images/medium/3562298873030291049_Winter.jpg" alt="The image is not available"/>
</a>
<input type="button" class="the-buttons" name="btnEdit" value="" style="background-image:url(../css/layout/site/tables/action2.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent;position:absolute;top:0;left:0;" title="Click to edit this image." />
<input type="checkbox" class="the-buttons" id="chk" name="chk" title="Check to mark for multiple deletion at once." style="position:absolute;bottom:0;right:0;" value="662"/>
<input type="submit" class="the-buttons" name="btnDeleteSingle" value="" style="background-image:url(../css/layout/site/tables/action4.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent; text-align:right;position:absolute;top:0;right:0;" title="Click to delete this image." />
</span>
The static CSS stype as with the buttons and the checkbox is unrelated. The CSS classes show-image with the given <span> tag, the-buttons with the given buttons and the checkbox are interacting with the jQuery code that gives this effect.
I have one additional requirement. When the given checkbox on the bottom-right corner of the image is checked/selected, it should be displayed permanently ignoring the fade-in and the fade-out effects. The two other buttons displayed on the image should however have that effect (when the checkbox is unchecked again, it should have that effect as it is meant). I have tried someway but didn't succeed. Is this possible somehow?
When it's checked, give it a certain class defined as this:
.always-visible {
display: inline !important;
}
And use this code:
$("#chk").on("click", function () {
var $this = $(this);
if ($this.is(":checked")) {
$this.addClass("always-visible");
} else {
$this.removeClass("always-visible");
}
});
(of course, replace $ with jQuery if necessary)
Now I think it might also be necessary to use this code for your fading:
jQuery(this).find('.the-buttons').not('.always-visible').fadeIn(600);
// and
jQuery(this).find('.the-buttons').not('.always-visible').fadeOut(300);
Make a function that checks if the checkbox is checked.
You can then execute this when the picture's hovered.
if($('#chk').is(':checked')) {
get only two of them fading in and out
}
else {
all of them fading in and out
}
Hope this helps.