I am using ionic framework and don't to use jQuery .how to make a horizontal sliding bar without using jQuery.
Something like :
I tried following code:
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
</ion-scroll>
I took reference from : http://codepen.io/calendee/pen/HIuft
but on mobile, touch did not work in above horizontal area.
You could use something like this maybe.
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
Related
I have 2 html files
index.html and services.html
On services.html I have
<a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a>
<a class="nav-link" data-bs-toggle="tab" href="#ai-tab">AI</a>
<div class="tab" id="ds-tab">
<p>DS section </p>
</div>
<div class="tab" id="ai-tab">
<p>AI section </p>
</div>
It works fine on services.html
But if I am on index.html and I have a link as
AI Section
It doesnt work it just navigates to the page but doesnt show the div I am refering to.
I tried doing something like this but it doesnt work too.
<a data-bs-toggle="tab" href="services.html#ai-tab">AI</a>
Add a data-target attribute to the AI Section link, and set it to the id of the ai-tab div:
<a data-target="#ai-tab" href="services.html">AI Section</a>
// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
if($(window).width()<768)
{
$('button#mobile-nav').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('button#mobile-nav').css('float','left');
}
});
});
<header class="nav">
<nav class="navbar navbar-default navbar-fixed-top navbar-color" role="navigation">
<div class="container-fluid">
<div class="navbar-header mobile-nav-header">
<button id="mobile-nav" type="button" class="navbar-toggle" role="button" aria-label="Toggle Navigation" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-right" id="facebook-mobile">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- navbar-header mobile-nav-header -->
<div class="collapse navbar-collapse text-uppercase" id="navbar">
<ul class="nav navbar-nav">
<li><a title="Welcome" class="glyphicon glyphicon-home" href="index.php"><span class="hidden">Home</span></a></li>
<li><a title="About" target="_self" href="#about">About</a></li>
<li><a title="Service" target="_self" href="#services">Services</a></li>
<li><a title="Address" target="_self" href="#location">Location</a></li>
<li><a title="Gallery" target="_self" href="gallery.php">Gallery</a></li>
<li><a title="Contact" target="_self" href="contact.php">Contact</a></li>
</ul>
<div class="navbar-right" id="facebook-desktop">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- #navbar -->
</div> <!-- container-fluid -->
</nav>
</header>
I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!
I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.
On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".
before-page-loads.png
after-page-loads.png
I have also provided my JavaScript and HTML code.
Thanks for your help!
I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");
The question is simple, and I don't know why I am not getting the behavior I want, this is the Angular UI Bootstrap accordion that I am using but as you can see on that example the only one way to open the accordion is if you click on the title, and that's not what I want,now look at this example, this is what I want, it doesn't matter where you click on the panel, the panel just will open whether you click on the title or not.
and here is the code I am using:
<accordion close-others="false">
<accordion-group class="fx-fade-right fx-speed-300"
ng-repeat="sport in sports | filter:query"
ng-show="sport.leagues.length">
<accordion-heading>
{{::sport.name}}
<span class="pull-right badge">{{::sport.leagues.length}}</span>
</accordion-heading>
<div class="list-group leagues-margin"
ng-click="addSportToLines(sport)">
<a href="javascript:void(0);" class="list-group-item"
ng-repeat="league in sport.leagues"
ng-class="{active: league.active}"
ng-click="addLeagueToLines(league)">{{::league.name}}
</a>
<a href="javascript:void(0);"
class="list-group-item list-group-item-danger"
ng-hide="sport.leagues.length">No Leagues
</a>
</div>
</accordion-group>
actually I just figured that out, just place the accordion-heading content into a div:
<accordion-heading>
<div>
{{::sport.name}}
<span class="pull-right badge">{{::sport.leagues.length}}</span>
</div>
</accordion-heading>
So, I'm building a login system using a "numpad". There are four numbers on one row and for rows. One number per row should be selected and those should then be correct for a login. The "numpads" are like this, four rows, four numbers:
<div class="numbers-1">
<a class="num-1 active" href="#">1</a>
<a class="num-2" href="#">2</a>
<a class="num-3" href="#">3</a>
<a class="num-4" href="#">4</a>
</div>
<div class="numbers-2">
<a class="num-1 active" href="#">2</a>
<a class="num-2" href="#">3</a>
<a class="num-3" href="#">4</a>
<a class="num-4" href="#">5</a>
</div>
<div class="numbers-3">
<a class="num-1 active" href="#">3</a>
<a class="num-2" href="#">4</a>
<a class="num-3" href="#">5</a>
<a class="num-4" href="#">6</a>
</div>
<div class="numbers-4">
<a class="num-1 active" href="#">4</a>
<a class="num-2" href="#">5</a>
<a class="num-3" href="#">6</a>
<a class="num-4" href="#">7</a>
</div>
Here the numbers selected now would be 1 2 3 4 as the css class for these is "active". jQuery changes the classes. Is it possible to make python check if these are correct? In another words, is it possible to make python "if css class for certain links here is 'active' do something else don't"? Or how do you propose this thing to be done?
The thing looks like this online:
http://cl.ly/image/0T1y3l3I3h22
The code that would be executed if the correct numbers were selected would be just a redirect to the page requiring the login. The python would be this then:
def login():
if ...... # if the css class for the links is not whatever it should be
error = 'an error message'
else:
return redirect(url_for('the_page_requiring_login'))
The reason python would be nice would be that I'm using Flask for the site and this code above would be very convenient therefore.