I have a PLUpload that I am launching in a jQueryUI modal dialog. After launching in the dialog, PlUpload's drag-and-drop still works, but clicking to launch the file browser does not.
JsFiddle of below code. The JsFiddle includes the jQuery and jQuery UI versions that my app is using:
http://jsfiddle.net/QqPLV/1/
HTML:
Open Uploader As Dialog
<div id="AddFilePopup" title="Add A File">
<div id="drop-target">After opening in a dialog clicking here does nothing, but drag and drop in Chrome still works...</div>
<div id="plupload-nohtml5">No runtime found, your browser doesn't support HTML5 drag & drop upload.</div>
<div id="plupload-filelist"></div>
</div>
CSS:
#drop-target {
border: 3px dashed #CCC;
text-align: center;
color: #999;
font-size: 16px;
padding : 50px;
cursor: pointer;
}
#debug {
margin-top: 20px;
}
#plupload-debug {
border : 1px Solid #600;
padding : 5px;
margin : 5px;
}
Javascript:
$(function () {
$('#add-file-link').click(function () {
$('#AddFilePopup').dialog({
modal: true,
width: 600
});
uploader.refresh(); //this fixes IE10 not being able to click to add files
return false;
});
initPlUpload();
});
function initPlUpload() {
uploader = new plupload.Uploader({
runtimes: 'html5',
drop_element: 'drop-target',
browse_button: 'drop-target',
max_file_size: '4mb',
upload: "upload.php"
});
uploader.bind('Init', function (up, params) {
if (uploader.features.dragdrop) {
$('#plupload-nohtml5').hide();
};
});
uploader.bind('FilesAdded', function (up, files) {
for (var i in files) {
$('#plupload-filelist').append('<div id="' + files[i].id + '">- ' + files[i].name + ' - ' + files[i].id + ' (' + plupload.formatSize(files[i].size) + ')</div>');
}
});
uploader.init();
}
I added the line
uploader.refresh();
to the click handler, and that fixed IE10, but Chrome still refuses to cooperate. Even entering uploader.refresh(); into Chrome's console does not bring the uploader's browse capability back to life...
Edit: To remove some lines that were not required to reproduce the problem and made it harder to read.
I have the same problem and there is a tweak for that. It happens when you have HTML5 as upload engine, so to solve the trick you need to add a style:
.plupload{ z-index : 99999; }
or if you prefer on the fly....
$("div.plupload").css({"z-index":99999});
This should fix your problem.
Other thing is that you are destroying the uploader before you create the window, so it won't work. if you want to execute pluploader into the dialog, I advice you to use the parameter open, so when the dialog initialize, it runs the behavior for pluploader on it.
Related
I have a Brightcove player and I want to change the play button to a pause button, when the player is paused.
This is the player:
<div style=\"position: relative; display: block; max-width: 1515px;\"><div style=\"padding-top: 50.77574047954866%;\"><video id=\"myPlayerID3\" ' +
' data-video-id=\"' + data3.videoId + '\" ' +
' data-account=\"' + data3.accountId + '\" ' +
' data-player=\"' + data3.playerId + '\" ' +
' data-embed=\"default\" class=\"video-js\" ' +
' controls></video>
And this is the styling of the button:
#myPlayerID3 .vjs-big-play-button {
display: block;
background: url(myurl) 25% center/contain no-repeat;
right:0px;
left:10%;
top:68%;
bottom:0;
position:absolute;
border-radius: 0;
width:10%;
height: 12%;
}
And this is the code that handles the pause event:
$(document).ready(function() {
var artist_video = document.querySelector("#artist_video");
var artist_video_play_button = artist_video.querySelector(".vjs-big-play-button")
videojs.getPlayer('myPlayerID3').on('pause',function(){
artist_video_play_button.style.background = "url(myurl) 25% center/contain no-repeat";
});
The code fires fine when the player is paused, but this happens:
The pause button appears, but the play button does not go away. And if I check the styles in developer tools, you can see that the "play" picture is marked as strikethrough (background property of #myPlayerID3), but it is still visible in the page:
If I uncheck the checkbox of the background style in developer tools, it goes away. Is this a rendering thing?
I've tried to remove the style like this
artist_video_play_button.removeAttribute("style");
or like this
artist_video_play_button.style.background = null;
But it did not work
The problem was that brightcove spawns a button while dumping HTML code in the page and that button takes the classes of the div (which is also acting as the button) and therefore it's styles. The solution was to remove the button altogether, after brightcove spawned it's HTML stuff, meaning after $(document).ready(function() =>{})
In the end we decided to drop brightcove and switch to CDN and simple HTML5 video tags, because this concept of brightcove spawning HTML code while the page is rendering was introducing a considerable amount of problems with customization
I was wondering how you can link to a element that is loaded from an external javascript (it's like a chat widget hosted on an external website). I googled a lot of threads on stack overflow with similair issues but none of the code worked as expected.
The code that appears in the header of my website;
var shadow = 'box-shadow: none;'
var customStyle = '.ExampleLauncherContent__bubble {' + shadow + '}';
var myExample = new ExamplePopup({
index: 'https://example.com/example.html',
launcherOptions: {
style: customStyle,
}
});
Then the element is styled like this on the custom CSS section of my website
.ExampleLauncher:before {
content: "Example";
position: absolute;
padding: 15px;
padding-left: 75px;
opacity: 1;
color: #333;
border-radius: 30px;
background: #FFF;
z-index: -1;
}
Now I would like to make the entire CSS styled element clickable with a link, but I am not sure how to integrate the code, example i found in other threads that did not work as expected (or maybe I implemented wrong)
<script>
a onclick="jsfunction()" href="#"
</script>
<script>
div.ExampleLauncher("click", function() {
alert("You clicked this div");
});
</script>
<script>
$(".ExampleLauncher").keyup(function(event){
if(event.keyCode == 13){
$(".ExampleLauncher").click();
}
});
</script>
<script>
$(".ExampleLauncher").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
</script>
<script>
$('.ExampleLauncher').onclick="myExample.open()
});
</script>
Regarding recent comments, this is script used to trigger the chatbot popup with a textlink
myLandbotpop.on('landbot-load', function(){
var buttonOpen = document.getElementsByClassName("openbot")[0];
buttonOpen.addEventListener("click", myLandbotpop.open)
I have the following code that slideToggle() a div while at the same time displaying a button that allows you to slideToggle() back and then hides itself.
$(document).ready(function() {
$("#about-user-widget .hide-btn").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})
The above works great, however when I refresh the page it goes back to the default. The about-user-widget is open and the show-button visibility is set to hidden.
My question is, how would I get the page reload to remember what my settings are at? So for example, if one had clicked hide, and the about-user-widget was hidden and the show-button was visible. How could I get that setting to stay when the page is refreshed?
The show-button is set to hidden by default.
<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><i class="fa fa-eye"></i> Show<span> | </span></div>
I know I'd need to commit this to memory somehow (cookie, local storage of some kind) but being new to jquery I'm not sure how to implement this.
Any help would be appreciated.
First I don't understand why you need two buttons? You can achieve this with one button.
As per saving the state of div shown/hidden
You can use storage in cookies or your preferred metnod.
As per cookie; read the following stack post
Then this for example how you can try:
I used this plugin: https://github.com/js-cookie/js-cookie
$(document).ready(function() {
var currentstate = Cookies.get('divstate');
console.log('on refresh=' + currentstate);
if (currentstate == 'open')
$("#about-user-widget").show();
else
$("#about-user-widget").hide();
$("#button").click(function() {
$("#about-user-widget").slideToggle();
var currentstate = Cookies.get('divstate');
if (currentstate == 'close' || currentstate == undefined) {
Cookies.set('divstate', 'open');
console.log('when click');
} else {
Cookies.set('divstate', 'close');
console.log('else');
}
console.log(Cookies.get('divstate'));
});
});
the HTML part:
<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>
Be aware about cookies plugin's compatibility with browsers; I tested with FireFox and working.
I want to use this drag and drop function also on mobile devices but when I run it on my mobile phones it doesn't work.
Here is the code:
copy = 1;
$('.dragArea img').on('dragstart',function(e) {
console.log('dragge it!',e);
e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
console.log('dragged',e);
});
$('.drop-field').on('dragover',function(e) {
//console.log('dragover',e);
e.preventDefault();
}).on('drop',function(e) {
e.preventDefault();
//window.status = 'successfully dragged';
console.log('drop',e,window.status);
data = e.originalEvent.dataTransfer.getData("text");
$(this).append(copy ? $('#' + data).clone() : $('#' + data));
});
.drop-field {
border: 4px #287CA1 dashed;
display: inline-block;
min-width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
<img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
<span class="drop-field"></span>
<span class="drop-field"></span>
</div>
Probably because the drag and drop functions use mousedown and mouseup, whose are not mobile compliant.
Here is a linked topic : How to get jquery dragging working on mobile devices? where the suggested solution to use jQuery UI Touch Punch (which convert click events to touch events).
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.