I'm using magnificPopup twice on the page: www.thisismaceo.com/test.php
first button (VIDEO, at bottom) opens the lightbox popup and has a close "x"
second button (AUDIO) opens the lightbox popup but has no close "x".
I tried so many options, including
inline: {
markup: '<div class="soundcloud-popup">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-content"></div>'+
'</div>'
}
to no avail.
any clues?
Look closer :)
#soundcloudplayer {
width: 80%;
height: 300px;
position: relative;
background: #FFF;
margin: 0 auto;
}
Related
Please open https://jsfiddle.net/gfmyt9u8/31/
When user clicks outside <section> tag area, then the opened div overlay panel should be closed.
Steps to produce scenario :
Click "Please Select Options"
Now, click first item from opened overlay panel (by doing this, the panel got closed automatically)
Next, Click inside the blue color border div (This shows "Please Select Options" as label) again
Now, try to click outside the "blue color border div" and "opened div overlay panel beneath" both
overlay panel will not close
Actual Result : overlay panel is not closing
Expected Result : overlay panel should close when clicked outside the "blue color border div" and "open overlay panel
beneath"
Use the mounted lifecycle hook to add a click event listener to check if the click event is outside the element or not, and based on that hide the element.
A working example:
new Vue({
el: '#app',
data: {
displayList: false,
cat: ['A', 'B']
},
methods: {
itemSelect(o) {
this.displayList = false;
}
},
mounted: function () {
// Listen to all clicks on the document
document.addEventListener("click", function(event) {
// If the click inside the element, do nothing
if (event.target.closest(".section-main")) return;
// If the clicks outside the element, hide it!
this.displayList = false;
}.bind(this));
}
});
.display-no-selected {
cursor: text;
width: 300px;
height: 25px;
border: solid 2px blue;
}
.display-list {
border: solid 1px wheat;
width: 300px;
max-height: 150px;
overflow-y: auto;
}
.toggle-list {
display: none;
}
ul, .selected-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.inner-ul li {
cursor: pointer;
font-weight: normal;
}
ul.inner-ul li:hover {
background-color: wheat;
}
.default-highlight {
background-color: wheat;
}
ul.inner-ul li span {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<section class="section-main">
<div class="display-no-selected" #click="displayList=true"> Please Select Options
</div>
<div class="display-list"
v-bind:class="{'toggle-list': !displayList}">
<ul class="inner-first-ul inner-ul">
<li v-for="o in cat" #click="itemSelect(o)">
<span>{{o}}</span>
</li>
</ul>
</div>
</section>
</div>
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.
I am opeing a new pop up window like this in rails 3
<%= link_to image_tag("/images/signin_lin.jpg"), linkedin_connect_path, :popup => true %>
also i tried this
link_to image_tag("/images/signin_lin.jpg"), { :action => "connect" }, :popup => ['new_window','height=300,width=600']
first one does open a new window and the page comes in full size when i use the second one i get the new window but the parent window becomes blank and once the even is completed than the controller goes to new pop up window where it's size is very small.
what i want is once the new pop up window is opened and the action is done, the pop up window should be closed and the controll should come to the parent window.
Please help me.
Use some CSS and Javascript!
Here's an example you can play with: http://jsfiddle.net/cdpZg/
Copying it here, just in case.
HTML:
<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div>I a piece of useless information. No use hovering over me.</div>
CSS:
#popup {
height: 50px;
width: 200px;
text-align: center;
vertical-align:middle;
background-color: cornflowerblue;
color: white;
display: none;
padding-top: 8px;
position: absolute;
}
Javascript:
$(document).ready(function() {
$('#user').hover(function() {
$('#popup').show();
}, function() {
$('#popup').hide();
});
});
I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}
I have a web site with a regular <input type="file"> file upload, POSTing the data to the backend when the form is submitted.
I would like to progressively enhance the form so that you can drop a file from outside the browser anywhere in the viewport (not just on the file input field, as built into some browsers) to upload it.
Whether or not the form autosubmits isn't important. So if the drag-and-drop only selects the file in the file field, without starting an upload, that's fine. I don't need support for multiple files. I don't need to show upload progress, thumbnails or anything fancy.
I know there are JS libs that support drag-and-drop uploads, but they all seem to upload via AJAX. I could do that, but then I would need to modify the backend and frontend to handle upload errors, redirect and show the right messages on success and so on.
I want a progressive enhancement that doesn't require any backend changes. It should happen synchronously using the form in the page. JS is fine, as long as the upload happens "in the foreground". Synchronous AJAX would not work, of course.
Although not really "synchronous" (JavaScript execution won't actually halt), you can set the files selected by <input type="file"> programatically. In fact, such elements and dragging share their file backend implementation (File and FileList instances), so it's really straight-forward. What's more, due to both frontends using FileLists, dragging multiple files work just as seamlessly.
This works in Chrome (using jQuery): http://jsfiddle.net/qMmPr/.
$(document).on("dragover drop", function(e) {
e.preventDefault(); // allow dropping and don't navigate to file on drop
}).on("drop", function(e) {
$("input[type='file']")
.prop("files", e.originalEvent.dataTransfer.files) // put files into element
.closest("form")
.submit(); // autosubmit as well
});
Thanks to #pimvdb comment, I came up with a pretty elegant solution.
Since drag and dropping on the <input type="file" /> works, why not making it full-screen on dragstart to make sure the user can't miss it? Anyway he is dragging so his intentions are clear at this moment.
Here's a demo: https://jsfiddle.net/08wbo4um
NB: unfortunately this doesn't seem to work in an iframe, but it does work on an actual page. You can still apprehend the behavior.
Here's the snippet:
$('input[type="file"]').on('change', function(e){
var fileName = e.target.files[0].name;
if (fileName) {
$(e.target).parent().attr('data-message', fileName);
}
});
$(document).on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
if ($('input[type="file"]').length) {
if (['dragover', 'dragenter'].indexOf(e.type) > -1) {
if (window.dragTimeout)
clearTimeout(window.dragTimeout);
$('body').addClass('dragged');
} else if (['dragleave', 'drop'].indexOf(e.type) > -1) {
// Without the timeout, some dragleave events are triggered
// when the :after appears, making it blink...
window.dragTimeout = setTimeout(function() {
$('body').removeClass('dragged');
}, 100);
}
}
});
h3, p {
text-align: center;
}
.form-group {
margin: 30px;
}
.file-upload .form-control {
height: 150px;
outline: 1px dashed #ccc;
outline-offset: -15px;
background-color: #eee;
}
.file-upload .form-control:before {
content: "\f093";
font: normal normal normal 14px/1 FontAwesome;
font-size: 3em;
left: 0;
right: 0;
display: block;
margin: 20px auto;
text-align: center;
}
.file-upload .form-control:after {
content: attr(data-message);
left: 0;
right: 0;
bottom: 0;
text-align: center;
display: block;
}
.file-upload .form-control input[type="file"] {
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body.dragged .file-upload .form-control input[type="file"] {
/* Make sure it is full screen, whatever the position absolute container */
position: fixed;
top: -50vh;
bottom: -50vh;
left: -50vw;
right: -50vw;
height: 200vh;
width: 200vw;
z-index: 10002;
}
body:after {
content: 'You can drop the file. :-)';
font-size: 2em;
text-align: center;
line-height: 100vh;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: #eee;
z-index: 10000;
border-radius: 4px;
border: thin solid #ccc;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease;
}
body.dragged:after {
opacity: 1;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>Drag N Drop file upload without AJAX Demo</h3>
<p>Try drag and dropping a file. :-)</p>
<div class="form-group file-upload" required="required">
<label class="cols-sm-2 control-label" for="document_file">File Upload</label><br>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-file" aria-hidden="true"></i></span>
<div class="form-control" data-message="Click to select file or drag n drop it here">
<input required="required" title="Click to select file or drag n drop it here" type="file" name="document[file]" id="document_file">
</div>
</div>
</div>
</div>
It can be done by turning autoUpload to false, collecting the files in an array, then on form submit do a single ajax call with all the files together with the form data, as described here.