I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...
The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.
The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.
I wanted to combine these two but it's not really straight forward for me :/
It would be nice if someone could point me how to do this. Thanks
Best regards,
Billy Beach
Dear lalibi,
Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:
<head>
<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script>
<style type="text/css">
<!--
div {
border: 1px solid black;
height: 50px;
}
div.current {
background-color: orange;
}
-->
</style>
<script type="text/javascript">
var current
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>
EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.
This seems to work fine: http://jsfiddle.net/9Amdx/1707/
var current;
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
Related
I have multiple divs with id='title'.
When that div is hovered over I want a hidden div with id="source" to appear.
I am using the following code but only the first div with id='title' on the page works.
<!-- Show Source / Date on mouse hover -->
<script>
$(document).ready(function(){
$("#title").mouseenter(function(){
$("#source").fadeIn( 200 );
});
$("#title").mouseleave(function(){
$("#source").fadeOut( 200 );
});
});
</script>
HTML Example:
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
<div id="title" class="col-md-3">
<div id="source" style="display:none">Hidden Text</div>
</div>
Use classes instead of IDs
use .find() to search for descendants of an element
jQuery(function($) { // DOM ready and $ alias in scope
$(".title").on({
mouseenter() {
$(this).find(".source").fadeIn(200);
},
mouseleave() {
$(this).find(".source").fadeOut(200);
}
});
});
.title {
display: flex;
}
/* Utility classe */
.u-none {
display: none;
}
<div class="title col-md-3">
TITLE 1
<div class="source u-none">Visible Text</div>
</div>
<div class="title col-md-3">
TITLE 2
<div class="source u-none">Hidden Text</div>
</div>
<div class="title col-md-3">
TITLE 3
<div class="source u-none">Hidden Text</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Hello Δce Let's start by modifying the source code to use classes for you to pick. This helps us describe the functionality and allow the ID's to serve their purpose.
we'll take your
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
<div class="col-md-3 show-source-on-hover">
<div class="source" style="display:none">Hidden Text</div>
</div>
and we can update the jQuery code
<script>
$(function() {
$(".show-source-on-hover")
.mouseenter(function() {
$(this).find('.source').fadeIn( 200 );
})
.mouseleave(function() {
$(this).find('.source').fadeOut( 200 );
});
});
</script>
You can see here there's the use of this wrapped in the $() jquery object function. and the new use of .find to get get the correct source class.
For a working demo please see the following link: https://codepen.io/jessycormier/pen/GRmaaEb
Note: your use of ID's should change and always try and be unique like others have suggested. MDN (Mozilla Developer Network) has some great documentation on the standards of HTML, CSS, and JavaScript which can help give you.
Also, in the demo I've given your column divs some default size otherwise there is nothing to trigger the mouse over events. Good luck and happy coding 🚀
IDs are IDENTIFIERS. What that means is that there can only be one per document. Classes are not unique, so you can use them.
✅ $(".title")
❌ $("#title")
This is my first time using ui-router and I find difficulties in handling routing and reloading some states. I hope anyone can help me with this.
overview of my index.html
<html ng-app="resApp">
<head></head>
<body ng-controller="mainCtrl" ng-cloak>
<div ng-show="showCustomerContent">
<div id="page-wrapper">
<div ui-view="header"></div>
<div ui-view="slider" ng-show="displaySlider"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</div>
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
<div ui-view="jsincludes"></div>
</body>
</html>
routing.js
'use strict'
resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider, $urlRouterProvider, $httpProvider,$locationProvider) {
$urlRouterProvider
.when('/','/Home')
.when('/login','/Home')
.otherwise('/Home');
$stateProvider
.state("home",{
url:'/Home',
views:{
'jsincludes':{
templateUrl:'views/includes/jsincludes.html'
},
'header':{
templateUrl:'views/customer_part/header.html',
controller:'headerCtrl'
},
'slider':{
templateUrl:'views/customer_part/slider.html'
},
'footer':{
templateUrl:'views/customer_part/footer.html'
}
}
})
.state("home.aboutus",{
url:"/AboutUs",
views:{
'content#':{
templateUrl:'views/customer_views/aboutus.html',
controller:'aboutusCtrl'
}
}
})
$httpProvider.useApplyAsync(true);
}]);
controller.js
'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
$rootScope.displaySlider = true;
$scope.$on('$stateChangeSuccess',function(event, toState){
var url = $location.absUrl().split('/');
//console.log(url);
if(url.length > 6){
$rootScope.displaySlider = false;
}else{
$rootScope.displaySlider = true;
}
});
UserData.getSessVar().then(function(msg){
if(msg.data!="none"){
$rootScope.uid = msg.data["uid"];
$rootScope.fullname = msg.data["fullname"];
$rootScope.role = msg.data["role"];
$rootScope.Id = msg.data["Id"];
if($rootScope.role == "customer"){
$scope.showCustomerContent = true;
}else{
$scope.showAdminContent = true;
}
}else{
$rootScope.role = "none";
$scope.showCustomerContent = true;
}
});
}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
$scope.hideLoginBtn = false;
if($rootScope.uid!=undefined){
$scope.hideLoginBtn = true;
}
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
$scope.home = function(){
$state.go('home', {}, { reload: true });
}
$scope.aboutus = function(){
$state.go('home.aboutus',{},{reload:true});
}
}]);
resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
}]);
In my header.html I have this code
<li>
<a href="" title="Home" ng-click="home()">
Home
</a>
</li>
Whenever I click Home the index.html is displaying another copy of my header and slider. As you can see in the image the {{fullname}} scope was displayed and also the other ui-views. I tried doing the ui-sref="home" ui-sref-opts="{reload: true, notify: true}" and put it in my anchor tag but the result is the same. I need to reload the page because my slider is not displaying if I just do ui-sref="home". I also tried to use the ng-cloak but whenever I click the anchor tag it also display my raw code in angularjs. The displayed raw code disappear when the whole page was rendered. Can anyone help me with this?
Update
This error only appeared in mozilla firefox. My routing is perfectly fine in chrome
There is div tag closing issue on the below code
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
Change it as below
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
</div>
Also, I am not sure why are you keeping header, footer, and slider as a named ui-view while you can achieve the same using simple ng-include. Use routing only for redirection and hyperlinks.
Refer my plunker for how to do it
https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview
Ideally you should have another html file ex:- main.html and in main.html specify the ui-view. for ex:-
<div id="wrapper">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
The problem is :- In below code I want to make it, if there is no photo uploaded then there will be a photo size bootstrap's glyphicon-user should be placed and when photo uploaded this will overwrite by the uploaded image.
//please add necessary files of bootstrap
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
//this is the script code for preview image when uploaded.
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
//this is image code here changes takes place to add bootstrap's glyphicon-user
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="" alt="Select Patient Image" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
I tried this but the glyphicon-user in span tag reside below patient image.
just suggestion here, why not convert the bootstrap's glyphicon-user to png then add it on since when the user upload the image it will be appended according to your code.
check a sample here http://jsfiddle.net/ws3bb7sr/1/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="http://s5.postimg.org/4xpbh5oo3/user_000000_128.png" alt="" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
Not the best idea, but you can use this code:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#img1 {
width: 100px;
height: 100px;
margin-left: 25px;
}
#img1::before {
position: absolute;
font-size: 100px;
}
</style>
<script>
$(function() {
setTimeout(function() {
$('#img1').attr('src', 'http://dummyimage.com/100x100/0ac72a/0011ff');
}, 2500);
});
</script>
</head>
<body>
<img src="" id="img1" class="glyphicon glyphicon-asterisk">
</body>
</html>
You might have some problems with transparent png files, so in better check it. If you have some problem with it you can remove the glyphicon classes when you update the src of your image.
I have an Angular application that renders spans based on whether they're needed or not (many ng-if's). I need to wrap these spans in a div based on their content/class names.
So, for example:
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
I don't want to do anything. But with
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
I DO want to wrap these 4 divs in a parent div <div class="parent"></div>, but only if the four appear one after the other. Is there a way to do this in CSS? Can I just use a combo of selectors to manipulate the four elements if they appear consecutively?
so you cant do this using just css and html, like the comments above, you need to use some form of javascript to manipulate the dom. heres an example using jQuery. hope it helps!
$(document).ready(function() {
$('.wrapme').each(function() {
var myElement = $(this);
var next1 = $(this).next();
var next2 = $(this).next().next();
var next3 = $(this).next().next().next();
if (next1.hasClass('wrapme') && next2.hasClass('wrapme') && next3.hasClass('wrapme')) {
var html = '<div class="parent"></div>';
next3.after(html);
var parent = next3.next('.parent')
parent.append(myElement);
parent.append(next1);
parent.append(next2);
parent.append(next3);
}
});
});
.parent {
background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2<div>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>
<span>BREAKKKKKK</span>
<div class="wrapme">1</div>
<div class="wrapme">2</div>
hey hey
<div class="wrapme">3</div>
<div class="wrapme">4</div>
<span>BREAKKKKKK</span>
I'm new to Blogger, and HTML and am trying to set up a fashion-blogging website on Blogger.
I've been successful in making the header image static (that is, doesn't move when scrolling through posts), but unfortunately it isn't aligned at the very top of the website. This makes it look very odd as content disappears as it scrolls under the header image, and reappears briefly as it scrolls between the header image and top of page.
I've looked into some basic HTML, but there is a huge jump from basic HTML to the HTML I see when I try to edit HTML directly on my Blogger website. I just want the header image to be aligned at the very top.
Can anyone help? Anything is appreciated.
Add the css top:0 to the DIV with ID "header-outer"
Plus
Why do you have so much unnecessary markup? You could replace all of this:
<div class="header-outer">
<div class="header-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left header-fauxborder-left">
<div class="fauxborder-right header-fauxborder-right"></div>
<div class="region-inner header-inner">
<div id="header" class="header section"><div id="Header1" class="widget Header">
<div id="header-inner">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
</div>
With:
<div class="header-outer">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
I faced something similar on my Blogger blog and I noticed that inspite of me switching off the navbar that comes with the Blogger website, in the the HTML code there was still a division on the top of the page for the navbar. I removed it from the template and was able to move the header image to the top of the webpage.
I removed this section of the code -
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\0752197236978911214706\46blogName\75MahekMody.com\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://www.mahekmody.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.mahekmody.com/\46vt\0753008633957882384298',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>