Semantic UI - How do I use sticky in modal window? - javascript

I'm using semantic-ui and i'm having a problem with the sticky component.
I can get it to work in a normal page but I can't get it to work in a modal window.
I'm using :
HTML:
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content">
<div class="ui sticky">
... content I want to have stick ...
</div>
JS:
$('.ui.sticky')
.sticky('refresh')
;
$('.ui.sticky')
.sticky({
type: 'fixed',
offset: 200
})
;

You're initializing sticky behavior before the element is even visible yet, cause you're using modal , to prevent that from happening, use onVisible callback to start sticky behavior like the following :
[DEMO]
JS(jQuery)
$( document ).ready(function() {
$('.ui.modal').modal('show').modal({
onVisible:$('.ui.sticky').sticky({
type: 'fixed',
offset: 200
}).sticky('refresh')
});
});
HTML
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content" style="min-height:1000px">
<div class="ui sticky"> ... content I want to have stick ... </div>
</div>
</div>

Related

Javascript/jQuery - Accordion onclick need to open only current div not all

I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};
Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});
Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');

Semantic UI popup with ui checkbox

I am trying to trigger a semantic ui popup on a ui checkbox onChecked event but it doesn't work the way it is supposed to. I am obviously new to Semantic UI. The code I've written shows a popup on hover but I thought the onChecked event would override the hover state. The popup now appears on hover after the onChecked event. Any ideas how to get this working?
I am using JQuery with Semantic UI JS and CSS versions:
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js
Here is my code
HTML
<!-- UI Checkbox -->
<div class="ui checkbox">
<input type="checkbox" id="popUpCheckBox">
<label>PopUp Checkbox</label>
</div>
<!-- PopUp DIV -->
<div class="ui flowing popup">
<div class="ui grid">
<div class="row">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
<div class="column">
Column 3
</div>
<div class="column">
Column 4
</div>
</div>
</div>
</div>
JQuery
$(".ui.checkbox").checkbox({
onChecked() {
$(".checkbox").popup({
popup: $(".flowing.popup"),
position: "bottom center"
});
},
onUnchecked() {
$(".flowing.popup").remove();
}
});
There is a popup option called on that you can set to "manual" to prevent the popup from showing on hover:
$(".ui.checkbox").checkbox({
onChecked() {
$(".checkbox").popup({
popup: $(".flowing.popup"),
position: "bottom center",
on: "manual" //the default is "hover"
});
$(".checkbox").popup("show"); //show the popup manually
},
onUnchecked() {
$(".flowing.popup").remove();
}
});
https://next.plnkr.co/edit/0GwhfmiXbYoYxue6?open=lib%2Fscript.js

Materilize side-nav always open, won't load collapsed

My side-nav should be loading collapsed and also showing a modal as in this fiddle:
Relevant code:
HTML:
<header class="text-center">
</header>
<div class="main_container">
<nav class="indigo darken-4">
<div class="nav-wrapper">
<h1>code.partners near you</h1>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Login with Github</li>
<li class="bold">Create a New Marker</li>
<li class="bold">Logout</li>
<i class="mdi-navigation-menu"></i>
</ul>
</div>
</nav>
<main>
{{!-- <div class="container text-center"> --}}
<div id="map_container">
<div id="map"></div>
<div id="message_box">
<ul id="messages"></ul>
<div id="messageInputBox">
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
</div>
{{!-- </div> --}}
</main>
and my Javascript:
$(document).ready(function(){
console.log("interactive is linked and ready");
// Initialize collapse button
$(".button-collapse").sideNav({
menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
});//end document.ready
my Heroku page:
http://coding-partners.herokuapp.com/home
My fiddle: https://jsfiddle.net/clwarnock/h7md1q3u/8/
I'm trying to get my side-nav to act more as in the fiddle:
Start collapsed
Display a modal when open
Editing for Danny Buonocore
When the viewport is adjusted to a small device size, there's no hamburger menu to open it back up again. I think there's a conflict somewhere that I'm not seeing.
The sidebar is designed to automatically be expanded when the window is large enough. This is known as responsive web design. If you make your browser smaller, you will see that it won't be expanded on load.

highcharts web chart inside a modal

I want to display highcharts web chart on a part bootstrap modal also I want to have a dynamic size along with the bootstrap modal.
What I tried so far is:
HTML code:
<td>${ studentInfo.name }</td>
Modal:
<div class="container">
<div id="studentProfile" class="modal container hide fade in" tabindex="-1">
...
<div class="modal-body">
<div class="row-fluid">
<div class="span6">...</div>
<div class="span6">
// chart
<div class="span6">
<div class="span6">
<div id="chart-web" class="span6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
JS code:
$( function() {
var $modal = $('#studentProfile');
$('.profiler').on( 'click', function() {
$.post('../admin/student_stats.do',
{ name : $(this).text() }, function( data ) {
console.log( data );
console.log( data['studentBean'].myName );
$modal.modal();
},'json')
.fail( function () {
bootbox.alert('Internal Error, please try again.');
});
});
});
The chart code:
$(function () {
$('#chart-web').highcharts({
...
});
});
Result:
At initial draw it works perfectly fine but
when I resize the browser
It messes up the chart. Also when I maximize again the browser the chart still remain like the image shown below. Is there a way to fix this?
If my question isn't clear please kindly comment and I will reply accordingly.
Update: Here a fiddle
you have too many nested class="span6" you need to reduce them
<!-- Right side -->
<div class="span6">
<!-- Graphical view of weakness -->
<div id="chart-web"></div>
</div>
change your problem codes to the above codes
Updated Demo click here

using media queries to manipulate jquery accordion

Hello I am having a difficult time with this jQuery accordion. I want to display the content using a jQuery accordion for mobile platforms and destroy the accordion on larger screen sizes. Everything is working fine except for two issues.
The accordion is destroyed only when the document window is re-sized and not destroyed on when the document loads.
once the accordion is destroyed I cant make the accordion work again when I resize the document window to mobile sizes.
here's some code:
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="content-fill">
<div class="content">
<div class="testimonials col-md-6 col-lg-6">
<h1>section 1</h1>
<p>this is a paragraph</p>
</div>
<div class="social col-sm-6 col-md-3 col-lg-3">
<h1>section 2</h1>
<div class="social-wrap">
<a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="383311602641952769">Tweets by #xxxxxx</a>
</div>
</div>
<div class="news col-sm-6 col-md-3 col-lg-3">
<h1>section 3</h1>
<p>this is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function()
{
$('.content').addClass('accordion');
$(window).resize(function() {
if ($('.social').css('float') == 'left') {
$('.content').accordion('destroy');
} else if($('.social').css('float') == 'none') {
$('.content').accordion('enable');
}
});
$(".accordion").accordion({
collapsible: true,
header: "h1",
heightStyle: "fill",
});
//getter variables
var collapsible = $(".accordion").accordion("option","collapsible");
var header = $(".accordion").accordion("option","header");
var heightStyle = $(".accordion").accordion("option","heightStyle");
$('.carousel').carousel({ interval: 4000, cycle: true });
}); // ]]>
Replace destroy with disable and add a handler also to load event:
function accordionSwitch() {
if ($('.social').css('float') == 'left') {
$('.content').accordion('disable');
} else if($('.social').css('float') == 'none') {
$('.content').accordion('enable');
}
}
$(window).on('resize load', accordionSwitch);
Accordion documentation says that destroy method
removes the accordion functionality completely. This will return the element back to its pre-init state.
so why you dont use media queries to hide the accordion on large screens and display it on "small" screens?
#media (max-width: 797px) {
. accordion {
display: block;
}
}
and your default style is
.accordion {
display: none;
}
Don't enable and destroy your accordion. Just run different functions depending on the screen size. That will be the easiest solution for you, and then you don't have to run a function on the screen resizing.

Categories