first of all I know this same questions has been asked several times but I cannot get it working properly. On the website Im implementing I open a popUp with some info and then prevent the rest of the body from scrolling. I want to allow to scroll the popup but not the menu. Also avoid using "position: fixed" on the body since it moves the page to the top. What am I missing to prevent the body from scrolling? The body already has the propierty "overflow: hidden". Here is the code I developed:
http://www.produccionsf2f.com/equipo/
HTML:
The overlay to cover the body:
<div id="scid-overlay" class="x-section scid-transition-eio overlay-open" style="margin: 0px;padding: 0px; background-color: hsla(0, 0%, 1%, 0.69);"><div class="x-container max width" style="margin: 0px auto;padding: 0px;height: 0;">
The actual popup:
<div id="scid-overlay" class="x-section scid-transition-eio overlay-open" style="margin: 0px;padding: 0px; background-color: hsla(0, 0%, 1%, 0.69);">
JS:
jQuery(function($){
var overlay = $('#scid-overlay');
var visiblePanel;
$(".scid-hook-link").click(function(event){
openPanel(event);
});
$('.scid-close-button').click(function(event) {
closePanel(event);
});
overlay.click(function(event) {
closePanel(event);
});
function openPanel(event){
event.preventDefault();
var id = $(event.target).attr('id').replace('hook', 'popup');
$(event.target).closest('figure').addClass(' scid-popup');
document.querySelector('#' + id).className += (' scid-panel-open');
overlay.removeClass('overlay-close');
overlay.addClass('overlay-open');
sizePanel(id);
window.location.hash = "#" + id;
visiblePanel = document.querySelector('.scid-panel-open');
};
function closePanel(event){
if(event){
event.preventDefault();
}
if(visiblePanel) {
var id = visiblePanel.id;
console.log(id)
console.log(visiblePanel);
document.querySelector('.scid-popup').classList.remove('scid-popup');
visiblePanel.classList.remove('scid-panel-open');
overlay.removeClass('overlay-open');
overlay.addClass('overlay-close');
sizePanel(id);
}
}
function sizePanel(id) {
var panel = document.querySelector( '#' + id);
if (panel.offsetHeight == 0) {
panel.style.height = panel.scrollHeight + 'px';
} else {
panel.style.height = 0 +'px';
window.location.hash = "";
visiblePanel = null;
}
};
window.onhashchange = function() {
if(visiblePanel && window.location.hash != '#' + visiblePanel.id){
closePanel();
}
}
});
CSS:
.overlay-close {
height: 0;
opacity: 0;
}
.overlay-open {
height: 100%;
opacity: 1
overflow: scroll;
overflow-y: auto;
visibility: visible;
z-index: 69;
}
Body overflow is working fine but you also given overflow-x: scroll to HTML Tag that is creating scrollbar.
You have to remove style of html in your css
html{
overflow-x: hidden;
}
Then overflow on body will be working fine.
http://prntscr.com/gzs7xs
Related
I'd like to use https://github.com/lonekorean/mini-preview to create mouseover previews for parts of a website only.
I have no problems using anchors from the target website to have the script render a full website preview, scrolled to where an individual anchor is.
That's not what I'm after however.
I'd like the script to show only the content of the anchors' parent <p> or <div>.
On the site, the link target anchors are coded like this:
<div class="paragraph">
<p>
<a id="anchor_1"></a>
Foo bar baz.
</p>
</div>
So, I'd like the little preview box to show Foo bar baz. only.
I suspect the answer lies in this part of the script:
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
specifically, the .attr('src', this.$el.attr('href')) part.
I'm not sure though.
Does anyone know how I can do this?
Or can you recommend some other script that I can use to do this and makes things look as nice as this one?
I'm not a web dev, so please go easy on me.
Thanks
UPDATE (based on Swati's answer and corresponding comments):
For example, if my website includes this:
<body>
<p>
See internal
</p>
<p>
See external
</p>
<div class="paragraph">
<p>
<a id="anchor_on_my_site"></a>
Foo bar baz.
</p>
</div>
</body>
and the external website includes this:
<body>
<div class="paragraph">
<p>
<a id="external_anchor"></a>
Qux quux quuz.
</p>
</div>
</body>
I'd like See internal to display Foo bar baz. and See external to display Qux quux quuz.
Inside loadPreview function you can use closest('p').clone().children().remove().end().text() to get text from p tag where a has been hover then using this put that text to show inside your frame div i.e : .find('.' + PREFIX + '-frame').text(data_to_show) .
Demo Code :
(function($) {
var PREFIX = 'mini-preview';
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'parenthover'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', {
class: PREFIX + '-wrapper'
});
//no need to use iframe...use simple div
var $frame = $('<div>', {
class: PREFIX + '-frame'
});
var $cover = $('<div>', {
class: PREFIX + '-cover'
});
$wrapper.appendTo(this.$el).append($frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
//add more style here ...if needed to outer div
$wrapper.css({
top: top + 'px',
left: left + 'px',
'font-size': '55px',
'color': 'blue'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
//to get text from p tag
var data_to_show = this.$el.closest('p').clone().children().remove().end().text().trim()
//set new text inside div frame
this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
//set bg color..
this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
$('a').miniPreview();
body {
height: 100%;
margin: 0;
padding: 0 10% 40px;
font-size: 2rem;
line-height: 1.5;
font-family: 'Roboto Slab', sans-serif;
text-align: justify;
color: #59513f;
background-color: #f5ead4;
}
a {
color: #537f7c;
}
.mini-preview-anchor {
display: inline-block;
position: relative;
white-space: nowrap;
}
.mini-preview-wrapper {
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
overflow: hidden;
z-index: -1;
opacity: 0;
margin-top: -4px;
border: solid 1px #000;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0);
/* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="paragraph">
<p>
<a id="anchor_1">See</a> This is text we are showing for first
</p>
<p>
<a id="anchor_2">See</a> This is text we are showing for second
</p>
</div>
</body>
</html>
Update 1 :
You can differentiate between external & internal link using some class i.e : simply check if the a tag which is hover has a particular class or not depending on this change your code to preview divs.
Updated Code :
if (this.$el.hasClass("internal")) {
//to get text from p tag
var data_to_show = this.$el.closest('p').siblings(".paragraph").clone().text().trim()
//set new text inside div frame
this.$el.find('.' + PREFIX + '-frame').text(data_to_show)
//set bg color..
this.$el.find('.' + PREFIX + '-frame').css('background-color', '#fff');
} else {
console.log("for external code ..")
}
Alright. This might sound a little bit complicated. I've got a script which fetches thumbnails from a JSON. It fetches 9 thumbnails and onclick of the #load it fetches 9 more. How can I set the Load more button underneath the thumbnails and how to make it stick to the bottom of them each time you click it? ( I do not want it like it's now, on the side, but right in the middle and underneath them ).
+BONUS question: How can I fixate the thumbnails so they always show up 3 in a row. Since now, when I resize the window they change ( as you can see in the fiddle, there's only 2 per row now ).
jsfiddle.net/z6ge55ky/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="twitch">
<script src="js/main.js"></script>
<div id="load">
<img class="hvr-pulse" src="http://i.imgur.com/KHIYHFz.png?1">
</div>
</div>
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
#twitch {
width: 60%;
position: absolute;
left: 20%;
text-align: center;
}
#twitch img {
border: 5px solid rgba(0,0,0,0);
margin: 0 auto;
cursor: pointer;
}
#load {
bottom: 0;
position: absolute;
}
You have declared the width for #twitch 60% remove that and for #load use top:100%
DEMO on jsfiddle
I am trying to create a sliding menu which will fill the window width minus the puller button width. I want the menu out of the window when web page load and there is a button which will go left when the page loads. When user clicks on the button the menu should come to window and button goes right.
I have created an animation video here which will show you what I want.
In the jsfiddle the menu just fades out, But I want the menu to slide from left to right when clicked on button with .puller class.
See the code at jsfiddle
Demo on jsfiddle
$(document).ready(function() {
var stickyNavTop = ($('.container')).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.container').addClass('fixed');
} else {
$('.container').removeClass('fixed');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
}).resize(function() {
stickyNav();
}).load(function() {
stickyNav();
});
$(".dropdown").click(function() {
$(".dpitem").slideToggle(300);
});
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('#cpcc,.dpitem').width($(window).width() - pullerDimensions);
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
var cPcc = document.getElementById ("cpcc");
var cpHeight = function() {
var cpBtnHolder = $(cPcc).height();
$('.content').css("padding-top",cpBtnHolder);
}
setInterval(function() {
cpHeight();
calcPHeight();
pp();
}, 0)
var calcPHeight = function() {
var toolsDimensions = $('#cpcc').height();
$('.puller').height(toolsDimensions);
$('.puller').css("line-height",toolsDimensions +"px");
}
$(document).ready(function() {
calcPHeight();
});
$(window).resize(function() {
calcPHeight();
}).load(function() {
calcPHeight();
});
var Pwidth = $('#cpcc').width();
var PSpce = $(window).width()-Pwidth;
$(".puller").click(function() {
$(".container").toggle( function() {
$(".container").css({
transform: "translate3d("+"-"+Pwidth+"px, 0, 0)"
});
}, function () {
$(".container").css({
transform: "translate3d(-0, 0, 0)"
});
});
});
});
Calc is your friend. You can use that along with 'transition' to achieve the intended effect. Check out this simplified example.
http://codepen.io/anon/pen/gPBQOb
Good practice is to toggle a class which will override the position property in this case left. It should also toggle your chevron image to point left and right.
Your example is using a lot of js calculations and has to recalculate with window size changes. This example uses js only to toggle a css class on click and the rest in managed purely with css. Much simpler in my opinion.
HTML
<div class="maincontent"></div>
<div class="menu">
<div class="button"></div>
</div>
CSS
.maincontent{
background-color: green;
height: 2000px;
width: 100%;
}
.menu{
background-color: red;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
transition: left 1s;
}
.menu.collapse{
left: calc(-100% + 30px)
}
.button{
background-color: yellow;
height: 100%;
width: 30px;
position: absolute;
right: 0px;
}
JS
$('.button').click(
function(){
$('.menu').toggleClass('collapse')
})
I am creating a JavaScript popup. The code is as below.
The HTML:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
The CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
The Script:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
function hideNow(e) {
if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}
The jsFiddle Link:
http://jsfiddle.net/K9qL4/2/
The Issue:
The above script works fine, but I need to make the popUp draggable.
Here's some code that will do what you want. It relies only on an object called drag to store all its values, but you can easily alter that. The example relies on there being a div with the id of mydiv (a document.write() is used in this instance to supply that) that has a position attribute of absolute or fixed. You can see it in action at Jamie
document.write("<" + "div id='mydiv' style='background:blue; width:100px;"
"height:100px; position:fixed;'>" + "<" + "/div>");
var drag = new Object();
drag.obj = document.getElementById('mydiv');
drag.obj.addEventListener('mousedown', function(e)
{
drag.top = parseInt(drag.obj.offsetTop);
drag.left = parseInt(drag.obj.offsetLeft);
drag.oldx = drag.x;
drag.oldy = drag.y;
drag.drag = true;
});
window.addEventListener('mouseup', function()
{
drag.drag = false;
});
window.addEventListener('mousemove', function(e)
{
drag.x = e.clientX;
drag.y = e.clientY;
var diffw = drag.x - drag.oldx;
var diffh = drag.y - drag.oldy;
if (drag.drag)
{
drag.obj.style.left = drag.left + diffw + 'px';
drag.obj.style.top = drag.top + diffh + 'px';
e.preventDefault();
}
});
Use the
.draggable();
jquery function, here is your updated fiddle:
http://jsfiddle.net/N9rQK/
If you don't want to use jQuery, you should read this subject: Draggable div without jQuery UI
I would like to implement something like stackoverflow does, the bar at top of the page that shows some message.
I came across this pretty nice effect with a page bounce too:
http://www.slidedeck.com/features/ (look at the purple top bar coming down)
Is there a simple way to do this? Maybe with only jQuery or other framework?
How about this? :)
Just add some fancy graphics and it should be good to go!
I just found a great and simple solution From blog.grio.com
jsFiddle Demo
function showNotificationBar(message, duration, bgColor, txtColor, height) {
/*set default values*/
duration = typeof duration !== 'undefined' ? duration : 1500;
bgColor = typeof bgColor !== 'undefined' ? bgColor : "#F4E0E1";
txtColor = typeof txtColor !== 'undefined' ? txtColor : "#A42732";
height = typeof height !== 'undefined' ? height : 40;
/*create the notification bar div if it doesn't exist*/
if ($('#notification-bar').size() == 0) {
var HTMLmessage = "<div class='notification-message' style='text-align:center; line-height: " + height + "px;'> " + message + " </div>";
$('body').prepend("<div id='notification-bar' style='display:none; width:100%; height:" + height + "px; background-color: " + bgColor + "; position: fixed; z-index: 100; color: " + txtColor + ";border-bottom: 1px solid " + txtColor + ";'>" + HTMLmessage + "</div>");
}
/*animate the bar*/
$('#notification-bar').slideDown(function() {
setTimeout(function() {
$('#notification-bar').slideUp(function() {});
}, duration);
});
}
var _show = true;
$(document).ready(function() {
$('button#showHide')
.bind('click', function() {
if (_show) {
$('div#hideMe')
.animate({
'height': '25px'
}, 750);
_show = false;
} else {
$('div#hideMe')
.animate({
'height': '0px'
}, 750);
_show = true;
}
});
});
body {
background-color: #003366;
padding: 0px;
margin: 0px;
text-align: center;
}
button {
cursor: pointer;
right: 5px;
float: right;
position: relative;
top: 5px;
}
div#hideMe {
background-color: #FF3399;
height: 0px;
overflow: hidden;
position: relative;
}
div#container {
background-color: #FFFFFF;
border: #FFFF00 1px solid;
height: 600px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
div#contents {
height: 600px;
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="hideMe">Congratulations, you just won a punch in the neck!</div>
<div id="container">
<div id="contents">
<button id="showHide">clicker</button>
</div>
</div>
Was just playing around with this. Does about what your example did. :)
you could do this about 17,334,259 different ways. But this'll work. Just make sure your boxes are positioned relatively, so the expansion of #hideMe pushes #container down too. Or absolutely position it and fix it to 0px,0px. or whatever...
You'll need to fetch the message to display, possibly via Ajax, but:
http://jsfiddle.net/ZpBa8/4/
shows how to show a bar across the top in jQuery and is a start
The same people who make the plugin whose page you love make a plugin to do what you love about it: http://www.hellobar.com/
The Meerkat jQuery plugin does this very nicely.
This can easily be done without jquery even. Just use the DOM to append a div element to the body and set its top position to zero. Set its width as the screen.width and height to be lets say 50px. And just initiate an opacity fade in/fade out. Like the following sample. This sample is for IE. Read this for reference. Call initFade to being the Fade In and Fade out process.
var OP = 90;
function processFade() {
var t = "";
OP = OP - 3;
if (OP < 0) {
clearTimeout(t);
OP = 90;
return;
}
$("YOUR_DIV_ELEMENT_HERE").style.filter = "alpha(opacity=" + OP + ")";
if (OP == 0) {
$("YOUR_DIV_ELEMENT_HERE").style.display = "none";
clearTimeout(t);
OP = 90;
return;
}
t = setTimeout("processFade();", 100);
}
function initFade() {
processFade();
}