I use "OWL Carousel" jQuery plugin (http://www.owlgraphic.com/owlcarousel/) for in my small project.
I create small script that draggable via this plugin. now i want to disable dragging in specific element (Item)... but i don't know how to do that.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
CSS:
div.wrap {
width: 990px;
min-height: 360px;
padding: 5px;
border: 2px solid #666;
margin: 10px auto;
}
div.item {
float: left;
border: 1px solid #ddd;
width: 324px;
margin: 1px;
min-height: 360px;
}
JS:
$(document).ready(function() {
$("#carousel").owlCarousel({
singleItem: true,
startPosition : -1,
autoPlayDirection : "rtl",
});
});
I know I should use to mouseDrag (http://www.owlgraphic.com/owlcarousel/#customizing) in a callback function , but i don't now how ... :(
I had the same problem and just figured it out:
Add a class to the items you want to disable (i.e. "disable-owl-swipe") and stop event propagation on touchstart and mousedown, so the parents (the owl carousel wrappers) don't receive the event and therefore don't swipe.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item disable-owl-swipe">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item disable-owl-swipe">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item disable-owl-swipe">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
JS:
$(".disable-owl-swipe").on("touchstart mousedown", function(e) {
// Prevent carousel swipe
e.stopPropagation();
})
Hope that helps!
I have the solution!
Just add the elements you want to exclude in "NDElement"
$( NDElement ).mousedown(function() {
$(".owl-wrapper").attr("class","dontdragg");
});
$( document ).mouseup(function() {
$(".dontdragg").attr("class","owl-wrapper");
});
Related
From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!
You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>
seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>
This is what I have:
<div class="container>
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
This is what I want:
<div class="container>
<div class="parent2">
<div class="child1"></div>
<div class="parent1"></div>
<div class="child2"></div>
</div>
</div>
Is this possible with only CSS or JavaScript (no jQuery)?
Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.
You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:
function reorder() {
document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}
.container * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.parent1 {
color: red;
border-color: red;
}
.child1 {
color: blue;
border-color: blue;
}
<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
I'm parent 2!
<div class="child1 ">I'm child 1!</div>
<div class="child2 ">I'm child 2!</div>
</div>
</div>
<button onclick='reorder();'>Reorder!</button>
Note: Css is only for better looks
With Javascript:
//Remove the parent 1 div from the container div
document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);
//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));
To make this work, I would advise that you remove the div.parent2 around the child classes.
Therefore the code becomes
<div class="container parent">
<div clas="parent1"></div>
<div class="child1"></div>
<div class="child2></div>
</div>
then you can use flexbox to do this
.parent{display: flex};
.child1{order:1}
.parent1{order:2}
I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point.
I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "withinId" jQuery selector.
I'm posting the latest jQuery I attempted (with just 2 out of the 5 variables I will need to make work here). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.
(abbreviated) HTML:
<div id="welcome">
<div class="title-bar">
<p>WELCOME</p>
</div>
</div>
<div id="global">
<div class="title-bar">
<p>GLOBAL ENGAGEMENT</p>
</div>
</div>
<div id="community">
<div class="title-bar">
<p>COMMUNITY</p>
</div>
</div>
<div id="resources">
<div class="title-bar">
<p>RESOURCES</p>
</div>
</div>
<div id="horizon">
<div class="title-bar">
<p>ON THE HORIZON</p>
</div>
</div>
CSS:
.title-bar {
padding: 5px;
position: relative;
}
.title-bar.sticky {
position: fixed;
top: 111px;
width: 100%;
z-index: 1040;
}
jQuery:
$(document).ready(function() {
var welcomeTitle = $('#welcome .title-bar');
var globalTitle = $('#global .title-bar');
var communityTitle = $('#community .title-bar');
var resourcesTitle = $('#resources .title-bar');
var horizonTitle = $('#horizon .title-bar');
var stickyOffset = $('#header').offset().top;
if ($w.scrollTop() > stickyOffset + 225) {
welcomeTitle.addClass('sticky');
globalTitle.addClass('sticky');
} else {
welcomeTitle.removeClass('sticky');
globalTitle.addClass('sticky');
}
if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
welcomeTitle.removeClass('sticky');
} else {
//
}
});
jsBin demo
Give your "pages" a class="page" and listen for their positions using JS's Element.getBoundingClientRect on: DOM Ready, window Load, window Scroll
$(function() { // DOM ready
var $win = $(window),
$page = $(".page").each(function(){
// Memorize their titles elements (performance boost)
this._bar = $(this).find(".title-bar");
});
function fixpos() {
$page.each(function(){
var br = this.getBoundingClientRect();
$(this._bar).toggleClass("sticky", br.top<0 && br.bottom>0);
});
}
fixpos(); // on DOM ready
$win.on("load scroll", fixpos); // and load + scroll
});
*{box-sizing: border-box;}
html, body{height:100%;}
body{margin:0;font:16px/1 sans-serif; color:#777;}
.page{
position:relative;
min-height:100vh;
}
.title-bar {
position: absolute;
top:0;
width: 100%;
background:#fff;
box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.title-bar.sticky {
position: fixed;
}
#welcome {background:#5fc;}
#global {background:#f5c;}
#community{background:#cf5;}
#resources{background:#fc5;}
#horizon {background:#5cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome" class="page">
<div class="title-bar">
<h2>WELCOME</h2>
</div>
</div>
<div id="global" class="page">
<div class="title-bar">
<h2>GLOBAL ENGAGEMENT</h2>
</div>
</div>
<div id="community" class="page">
<div class="title-bar">
<h2>COMMUNITY</h2>
</div>
</div>
<div id="resources" class="page">
<div class="title-bar">
<h2>RESOURCES</h2>
</div>
</div>
<div id="horizon" class="page">
<div class="title-bar">
<h2>ON THE HORIZON</h2>
</div>
</div>
Design-wise > add a padding-top to the first container element (inside your .page) to prevent content going underneath the title element (since it toggles from absolute/fixed positions).
Have a look at the Waypoints plugin.
You can probably make it a little easier on yourself by assigning each section a class and then add and remove the class from each section with jquery each function.
Try something like the following:
$(window).on( "scroll", function() {
$( ".section" ).each(function() {
if ( $(window).scrollTop() >= $(this).offset().top - 50 ) {
$( this ).addClass("sticky");
}else{
$( this ).removeClass("sticky");
}
});
});
Then your css
.section{
height: 200px;
background: #333;
border:1px solid #222;
position:relative;
}
.section .title-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:50px;
}
.section.sticky .title-bar {
position:fixed;
}
And html
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
I want to create a table with 4 columns, but only show 3 columns. So I would ideally have a div that spans the 3 columns and apply overflow: hidden. On a click of the button, I want column 3 (company 2) to slide left, and be replaced with column 4 (company 3), so that company 3 gets compared against company 1. If the button is clicked again, company 3 should slide left again, but company 2 should slide from the right and return to its original position as it was originally. The reason for doing this is because in mobile view we can't fit in all the columns.
Fiddle can be found here:
https://jsfiddle.net/smks/U7JHM/197/
HTML
<div class="div-table">
<div class="div-table-row header-row">
<div class="div-table-col header-row"> </div>
<div class="div-table-col header-row">company 1</div>
<div class="div-table-col header-row">company 2</div>
<div class="div-table-col header-row">company 3</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 1</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 2</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
<div class="div-table-col">yyy</div>
</div>
<div class="divRow">
<div class="div-table-col">Comparison 3</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
<div class="div-table-col">yyy</div>
</div>
</div>
<br>
<button>Compare Next</button>
CSS
.div-table{
display:table;
width:auto;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
padding: 0;
text-align: center;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
padding: 5px;
}
.div-table-col{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
border:1px solid #666666;
padding: 5px;
}
.header-row {
height: 50px;
}
Here is a quick and dirty way - first I applied classes to the third and forth cols, and then animated the 4th one to hidden with a duration of 1 so it happens instantly. Then I toggle columns 3 and 4 each time the button is pressed.
$(document).ready(function () {
$(".c4").animate({
width: 'toggle',
opacity: 'toggle'
}, 1);
$("button").click(function (event) {
event.preventDefault();
$(".c3, .c4").animate({
width: 'toggle',
opacity: 'toggle'
});
});
});
Updated fiddle: https://jsfiddle.net/U7JHM/202/
I'm trying to create a notification system for my website, but am having problem for some unknown reason. I have a link when a user clicks it, it fire off a JavaScript function, then checks if a div is hidden, if it is hidden, it show it and load a PHP script within that div.
I probably overlooked something
my JavaScript code:
// show notifications
$(".noti_bubble").click(function () {
// check the visibility of the element
if($(".show-note").is(":hidden")) {
$(".show-note").show();
alert('noti_bubble has been perform');
$(".show-note").load("scripts/notifications.php");
}else{
$(".show-note").hide();
}
});
my html code:
<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
the .show-note has a css of display:none; as well.
the clickable link:
(0)
Add the complete callback to .load():
$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
alert(status);
});
http://jsfiddle.net/9M396/
html
<div style="width:500px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
(0)
js:
// show notifications
$(".noti_bubble").click(function () {
var div = $(".show-note");
if(div.is(":hidden")) {
div.show();
div.load("/echo/json/?json={}");
}else{
div.hide();
}
return false;
});
css:
div
{
border: 1px solid black;
}
.show-note
{
min-height: 100px;
display:none;
}