Button on Slider Not responsive - javascript

I am creating a website and would like to use this ready made slider on my page. I have added it to my code, however, the left button does not work. The right button works but the hover disappears on mobile view.
I am new to web development and therefore still learning. If someone could help that would be much appreciated. The CodePen for this slider is https://codepen.io/bryan-erwin/pen/dJEYVr
<header>
<div class="container" id="container">
<div class="caption" id="slider-caption">
<div class="caption-heading">
<h1>Example</h1>
</div>
<div class="caption-subhead"><span></span></div><a class="btn"
href="#"></a>
</div>
<div class="left-col" id="left-col">
<div id="left-slider"></div>
</div>
<ul class="nav">
<li class="slide-up">
<a id="up_botton" href="#"><</a>
</li>
<li class="slide-down">
<a id="down_button" href="#">></a>
</li>
</ul>
</div>
</header>
I would like the left button to go to the previous slide and the right button hover to work on all views

Your javascript code is incomplete you are listening to the right side button click event by this code:
let down_button = document.getElementById('down_button');
down_button.addEventListener('click',function(e){
e.preventDefault();
clearInterval(autoplay);
nextSlide();
autoplay;
});
you have to add code for the left side button also like this:
let up_button = document.getElementById('up_button');
up_button.addEventListener('click',function(e){
e.preventDefault();
clearInterval(autoplay);
prevSlide(); // you have to create this function
autoplay;
});
for this, you have to also add an id="up_button" to the left side button.

Related

Semantic-ui Tabular Menu not working as expected

Hy, i'm trying to build an Electron app that uses Semantic UI. At the moment, i'm trying to implement a tabular menu as shown in the basic tab example, and this is the behavior i'm trying to implement: https://semantic-ui.com/modules/tab.html#basic-tabs.
My code seems to be all right but the menu isn't behaving as expected. In the image below you can see that the content of the div's just appears down the others, as a normal div html section.
Well, in my research i found that we have to put somethiing like
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
And i did, just don't know if the right way. After that the functionality of changing the pressed button is working, i.e. if i press the "second" button the ui render correctly, lik image below. And so on with the other possible tabs.
I've already did the following steps:
-> Import jQuery via NPM with npm install jquery --save and this gave me "jquery": "^3.5.1" on my package.json file.
My full code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
</head>
<body>
<div class="ui visible left demo vertical inverted thin sidebar labeled icon menu">
<a class="item" href="index.html">
<i class="tint icon"></i>
Análise
</a>
<a class="item" href="resultados.html" style="color: aquamarine;">
<i class="chart bar icon" style="color: aquamarine;"></i>
Gráficos
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<div style="width: 80%; margin: 2%;">
<div class="ui top attached tabular menu">
<a class="item active" data-tab="hidrogenio">
Níveis de hidrogenio
</a>
<a class="item" data-tab="etano">
Photos
</a>
<a class="item" data-tab="etileno">
Etileno
</a>
</div>
<div class="ui bottom attached segment" data-tab="hidrogenio">
<p>First Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etano">
<p>Second Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etileno">
<p>Third Tab</p>
</div>
</div>
</div>
</div>
<script>require('./js/renderer')</script>
</body>
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
</html>
I don't know why the div with the data-tab aren't working as expected and remain "hidden" until we press the respective button...
I'd appreciate so much the help! Thanks.
after looking on your code and checking the documentation which I post below the basics:
<!-- The basic format for a tabular menu -->
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
and the JS code:
// the require js code to make semantic read that html as a tabular menu
$('.menu .item')
.tab()
;
I don't see the required JS part on your code, just the actions your script will run when you click an item. You really need the JS code part I posted in order for that to work.

Responsive sticky hamburger navigation bar

I am trying to make a responsive sticky navigation bar which will shorten when the screen gets too small (for mobile). The navigation bar works fine without the hamburger bars on my laptop, but i am struggling to implement the following code on W3C with my code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
the following is a link to jsfiddle with the HTML, CSS and Javascript code I am using.
HTML
https://jsfiddle.net/cpeotvsf/25/
below is my code
<body>
<div class="top-container">
<h1>testing header</h1>
<h3>Scroll down to see learn more.</h3>
</div>
<div class="header" id="myHeader">
<div class="navbar" id="Mynavbar">
Home
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Red or Black Tarmac Drives and Paths
Fencing and Gates
Shingle and Coloured Gravels
Drainage Work
Patios and Crazy Paving
Block Paved Driveways and Paths
Turfing and Artificial Grass
Brick and Purbeck Stone Walls
Decking and Rockeries
</div>
</div>
Gallary
Before and After
Testimonials
Contact Us
<a href="javascript:void(0);" class="icon" onclick="myFunctionn()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
The CSS and Javascript I am using are in the jsfiddle link above
Any help on this would be greatly appreciated
Your js is fine but jsFiddle keeps the script's load-type on load rather than at the bottom of the page so the onClick can't find the following function:
function myFunctionn() {
// place this script below your body content.
}
To make the above function run properly in jsFiddle, just click JavaScript + No-Library (pure JS) ▼ and change the load type to bottom of body then re-run the script.
jsFiddle with load type updated: https://jsfiddle.net/cpeotvsf/35/

keep link active after clicked using same page anchors

Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.
Here's what I've got. I'll just show you guys the first link and section since the solution will most likely be the same for the following links. I haven't written any CSS because I'm not sure how to go about this.
<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
Scheduling
</div>
</nav>
<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
<header class="top">
<div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
<div class="col2"><img src="images/scheduling-client-group-event.png"></div>
</header>
<div class="clearfix"></div>
<div id="schedBottom">
<p>One calendar that lets you manage schedules for your team<br />
and your spots, all in one calendar, with options of sharing your<br />
own personal schedule, and you can accept and decline<br />
appointments with any device.</p>
</div>
</article>
Using jQuery you can simply toggle an active class on links:
$('#navContent a').click(function(){
/* remove class from prior active link*/
$('.activeLinkClass').removeClass('activeLinkClass');
/* "this" is current link clicked*/
$(this).addClass('activeLinkClass');
});

Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle

How can I get the scrollbar to stay at the bottom?

I have a web application that performs certain task, and have created a tabbed box in the web app that will print any log information to the designated area.
As you can see from the code below I have three tabs, and when one is clicked I have javascript and jQuery display the div area associated with that tab. Under each div area there is a nested div that will be used for the log to print to.
All is working great other than the scroll bar not staying at the bottom.
I have tried:
HTML:
<div id="main" class="main">
<div id="tabbed-box"class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Tail</li>
<li>Access Log</li>
<li>Conduit Log</li>
</ul>
<div id="tail_box" class="tabbed-content">
<div id="tail_print" class="print-area"></div>
</div>
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area"></div>
</div>
<div id="log_content" class="tabbed-content">
<div id="log_keywords" class="keywords"></div>
<div id="log_print" class="print-area"></div>
</div>
</div>
jQuery:
document.getElementById("access_log_print").scrollTop = document.getElementById("access_log_print").scrollHeight;
But with no luck. All of the div's with class="print-area" I need the scroll bar to be at the bottom.
If you are using jQuery then you can try this.
$('.print-area').each(function(){
$(this).scrollTop($(this).prop('scrollHeight'));
});

Categories