mCustomScrollbar "scrollTo" not working in a single page application - javascript

I know that there are many questions like that, but I couldn't find a solution to my problem.
In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.
<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
<div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
<div class="page" id="dashboard_all" style="width: 8360px;">
</div>
</div>
<div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
This is the code that the plugin creates when I apply it to the div #overflow
$(document).ready(function() {
$("#overflow").mCustomScrollbar({
axis:"x",
theme:"jmsHorizontalScrollbar",
scrollButtons: {
enable: true
},
scrollInertia: 950,
callbacks:{
onScroll:function(){
//this functions sets the value in another js file. -(this.mcs.left) to get a positive value
getNavigator().setScrollLeft(-(this.mcs.left));
},
alwaysTriggerOffsets:false
}
});
})
Then I use the position found in the callback like that
$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);
But nothing happens.
If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.
Thank you in advance,
Matteo

I did it! I used the scrollTo method in the onUpdate callback
onUpdate:function(){
$("#overflow").mCustomScrollbar('scrollTo',position, {
// scroll as soon as clicked
timeout:0,
// scroll duration
scrollInertia:0,
});
}

Related

Need help adding rel to an img tag using js

I need help with some JS. I need to add rel="lightbox" to the main images of the code below so that these images will open in a lightbox. I grabbed this code from the inspector and this is being generated by a plugin so instead of editing the plugin files I'd like to add the rel code another way. I assume I can add this via JS but nothing I am finding is working. Any help would be appreciated.
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
You need to do something like this:
const imgs = document.querySelectorAll('img.rsImg')
for(let img of imgs){
img.setAttribute('rel', 'lightbox');
}
The code is not tested, but I'm sure it'll guide you.
It looks like all of the images you want are tagged with the class "rsImg".
If this is the case, you can select all images with that class and add the "rel" attribute to them...
document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
.forEach( // for each of the things selected, run the code here
n => n.setAttribute('rel', 'lightbox')
)
The following snippet runs that code, using your html from the question (with the images changed to placeholders) -- after it runs you can use your browser to inspect the element(s) and see that the rel attribute is added to each img.
document.querySelectorAll('img.rsImg').forEach(n => n.setAttribute('rel', 'lightbox'))
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage"
src=" //www.fillmurray.com/1008/1024"
style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>

Display Fancybox3 with large content (width)

I have an issue with fancybox3. If you have a bigger content width, e.g. 2500px, the display of the box proceeds not as normal. To see this fancybox you will have to scroll down.
Here is my code:
<div style="height: 800px;">
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancyBox width 500px;
</a>
<br>
<a data-fancybox data-src="#hidden-content2" href="javascript:;">
Trigger the fancyBox width 2500px;
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<div style="width: 500px;">
... some stuff ...
</div>
</div>
<div style="display: none;" id="hidden-content2">
<h2>Hello</h2>
<div style="width: 2500px;">
... some more stuff ...
</div>
</div>
I've a codepen for this issue. Any ideas?
https://codepen.io/anon/pen/EQmgjK
fancyBox uses inline-block trick for vertical and horizontal centering. This is the best option for centering in the unknown, but unfortunately there are some drawbacks. By forcing extra wide content, you are breaking it.
You have several options, for example:
Make content scrollable:
#hidden-content2 {
max-width: calc(100% - 80px);
overflow: auto;
}
https://codepen.io/anon/pen/vdmyRo
Hide pseudo element
.fancybox-slide.wide:before {
display: none;
}
(You can set custom class name by setting data-slide-class="wide" attribute)
https://codepen.io/anon/pen/vdmydo?editors=1100

After button is clicked , another button won't click

I'm trying to make a content slider just like youtube
And here is mine..
My content slides to right or left perfectly by 800px. But here's the problem.. When I click on the left icon first , Then clicking on the right icon won't work! Could there be a solution to this..?
Javascript:
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
});
$(document).ready(function(){
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({left: '+=800px'});
});
});
HTML:
<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
<table id="trendingtable" class="table" style="position:relative;">
<a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px;
position:absolute; z-index:1;" class="previous round">‹</a>
<a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px;
margin-top: 62px; position:absolute; z-index:1;" class="next round">›
</a>
<tr>
<?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
<td>
<div class="media" style="border: 1px solid #e6e6e6; width:400px;
padding: 0px;">
<img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
class="pull-left img-responsive" style="width: 200px; height:
150px;" id="artistimg">
<div id="trendingmediabody" class="media-body">
<p id="trendingname" style="font-size:14px; font-weight:
bolder;"><?=$tsingers['name'];?></p>
<p id="trendingcategory" style="font-size:12px; font-weight:
bolder;"><?=$tsingers['category'];?></p></br></br>
</div>
</div>
</td>
<?php endwhile; ?>
</tr>
</table>
</div>
The "left" and "right" attributes are conflicting.
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({right: '-=800px'});
});
});
P.S.: I also removed the double $(document).ready since one is enough.
Heyo, you only need one $(document).ready(), you can put both functions inside that one.
Try check on the inspector to see if after the slide animation something doesn't overlap the button
I'm going to take a guess and say that it is because you are animating left and right instead of one or the other. left doesn't mean "move left", it means, "set the left CSS style property". And left means "where does my left border belong relative to my nearest relative parent".
Read a bit more about the left and position CSS properties.
Try this instead:
$(document).ready(function () {
$("#trendingnexticon").on('click', function () {
$("#trendingtable").animate({
left: '-=800px'
});
});
$("#trendingpreviousicon").on('click', function () {
$("#trendingtable").animate({
left: '+=800px'
});
});
});

Angular - detect click background div but not on divs within

On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed
You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.
I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.

Why doesn't this jQuery code moving divs to the right?

jsFiddle (with slightly modified values so it appears correctly).
I am trying to move the position of some divs on my page.
div.note {float:left;width:666px; padding:0 0 0 50px;}
div.first_note {margin-left: 565px;}
The divs are horizontally displayed, with 50px between each one.
<div id="note-1" class="note first_note">
note display here
</div>
<div id="note-2" class="note">
note display here
</div>
<div id="note-3" class="note">
note display here
</div>
This is the moving code:
$('.note').animate({"left": "+=500px"}, "slow");
When this is run, the notes don't move at all, but the HTML changes to this:
<div id="note-1" class="note first_note" style="left: 500px;">
note display here
</div>
<div id="note-2" class="note" style="left: 500px;">
note display here
</div>
<div id="note-3" class="note" style="left: 500px;">
note display here
</div>
What am I doing wrong?
you need to position it relative.
div.note {
float:left;width:60px;
padding:0 0 0 50px;
position: relative;
}
demo
edited your fiddle: http://jsfiddle.net/PsQBD/1/
it should be
margin-left: +=500
without the px.

Categories