Why does the animation not work if I change pages? - javascript

I have a Drupal 8 site with Bootstrap 3 theme.
I created a homepage with a newsfeed. Whenever there is a publication on the site, it generates a message in the newsfeed. The messages can have the status read or unread.
I want that when the .action-flag class is in the page, an animation is applied on the logo of the site.
The CSS and JS file is included on all pages of the site.
The .action-flag class is only on the home page, when a message is not marked as read.
Here is the structure of my homepage :
Here is my JS code :
if ($("#pills-private .action-flag").length) {
$(".region-navigation-logo img").addClass("timeline-notification");
};
Here is my CSS code :
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(138, 186, 18, 1);
}
70% {
box-shadow: 0 0 0 10px rgba(138, 186, 18, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(138, 186, 18, 0);
}
}
.region-navigation-logo img {
height: 56px;
border-radius: 50%;
background: #8aba12;
}
.timeline-notification {
box-shadow: 0 0 0 rgba(138, 186, 18, 1);
animation: pulse 2s infinite;
}
Currently, the animation works very well. But only if I'm on the homepage. If I go to another page, the animation does not work anymore.
THE PROBLEM
It only works when I go to the homepage. I want it to work on the whole site. The goal is to notify the user that a new activity is available in their newsfeed.
Is there a solution for this?

Related

How do I hide a scrollbar after scrolling and make it visible again on scroll?

My intention is to hide my scrollbar (i.e, hidden by SLIDING TO THE RIGHT), after scrolling (let's say, like 2 or 3 seconds after I'm done scrolling)
And to make it visible again, soon as I start scrolling (i.e, visible by SLIDING IN FROM THE RIGHT)
VIEW CODE SNIPPET:
div::-webkit-scrollbar {
width: 8px;
/* helps remove scrollbar which resizes or shifts list items */
/* display: none; */
}
div::-webkit-scrollbar-track {
background-color: #444444;
}
div::-webkit-scrollbar-button:vertical:increment {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-button:vertical:decrement {
background-color: rgba(108, 92, 231, 0.65);
}
div::-webkit-scrollbar-thumb {
background-color: rgba(108, 92, 231, 0.7);
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
background-color: rgba(108, 92, 231, 1);
}
div {
width: 500px;
height: 300px;
background-color: #ececec;
overflow: auto;
}
<div>
<p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>
Please help me everyone (I'D BE SO GRATEFUL!)
:D
Since CSS does not have timeouts and clearing of timeouts - Use JavaScript
Use Element.classList to add and remove a class
Use setTimeout() set at 2500ms, but every time a scroll event is triggered remove the previous pending timeout using clearTimeout. Logically, after you finished scrolling the last timeout that was set will, after 2.5s trigger finally the class removal.
Use a CSS class like .is-scrolling to there define the desired scrollbar styles (which otherwise are transparent by default)
const showScrollbars = (evt) => {
const el = evt.currentTarget;
clearTimeout(el._scrolling); // Cancel pending class removal
el.classList.add("is-scrolling"); // Add class
el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
el.classList.remove("is-scrolling");
}, 2500);
};
document.querySelectorAll("[data-scrollbars]").forEach(el => {
el.addEventListener("scroll", showScrollbars);
});
[data-scrollbars] {
width: 500px;
height: 180px;
background-color: #ececec;
overflow: auto;
}
[data-scrollbars]::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-scrollbars]::-webkit-scrollbar-track {
background-color: transparent;
}
[data-scrollbars]::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 10px;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-track {
background-color: #777;
}
[data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
background-color: gold;
}
<div data-scrollbars>
<p style="height: 300vh;">
Just some tall paragraph to force DIV scrollbars...<br>
Scroll me! (<<< PS: See the problem?!)
</p>
</div>
I would highly not advise you hide scrollbars. Scrollbars are a visual hint to the user that there's actually content to be scrolled. Do a simple A/B testing. For half of your visitors show the scrollbar. For the other half, do that funky stuff - and don't be surprised that your click trough-rate for the below-the-fold portion of the app (or element) has fewer-to-none interactions by that second group of users.
I am thinking about what if user do not have any mouse wheel for scrolling and if user scroll with the actually using scroll bar.
Anyway please search for slim fading scroll bar example at google. You will find some examples for the slim scroll maybe it’s not invisible but it’s transparent and have a good shape.

Dynamically create one or more borders around image

Need to have an unknown number of borders around an image, already made a solution, just want to know whether there are better possibilities.
I have a website with many photo shows. Each show is a JSON file in which each photo is an array entry in that file, e.g.
{
"filename": "02.jpg",
"short": "text under thumbnail",
"title": "A description or explanation above the photo"
}
Normally the photos get a small white border, but sometimes I want to show the location of that photo so in the JSON file I have this additional info for that photo:
"latitude": "51 02 39.73 N",
"longitude": "114 03 47.37 W",
I put a yellow border around the photo as indication that there is location info, so a click on the photo or one of the coordinates (or keyboard M) opens googleMaps to show the location.
Recently I added some videos to some of the photos, so double click the photo (or keyboard V) to start that video. I put a turquoise border around the photo to indicate that there is a video.
In the JSON file it looks like this:
"video": "myvideo.mp4",
Of course all of a sudden I had a photo with location info AND a video, so now I needed 2 borders: a yellow one and a turquoise one...
To complicate matters, I once in a while have a photo with a soundclip and a green border, defined in the JSON file as:
"sound": "myclip.mp3",
thus a photo with 3 different colored borders could also happen.
After reading some stackoverflow box-shadow articles, I came up with the following solution in Javascript to create 1,2,3 or even more borders:
var borderStyle = "";
if (elt.longitude) {
borderStyle = "coordbrdr";
}
if (elt.sound) {
borderStyle += "soundbrdr";
}
if (elt.video) {
borderStyle += "videobrdr";
}
if (borderStyle == "") {borderStyle = "normalbrdr";}
$(elt.imgHTML).attr('class', borderStyle);
and the accompanying css:
.normalbrdr {border:6px solid white;}
.coordbrdr {border:6px solid yellow; cursor:pointer;}
.soundbrdr {border:6px solid lightgreen; cursor:pointer;}
.videobrdr {border:6px solid turquoise; cursor:pointer;}
.coordbrdrsoundbrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green; cursor:pointer}
.coordbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px turquoise; cursor:pointer}
.coordbrdrsoundbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green, 0 0 0 18px turquoise; cursor:pointer}
.soundbrdrvideobrdr {box-shadow: 0 0 0 6px green, 0 0 0 12px turquoise; cursor:pointer}
So in this way I managed to build the various class values.
My question: Would there be a shorter, or better method to dynamically create different borders ??

Make a div that go somewhat curved

This question have been asked a billion times I think, but just another case.
How to make this with HTML / CSS (and, if no other option, JS - I'm thinking of canvas or SVG) :
Notes : the div should be able to contain a scrolling background image on the whole green part. And this should work on IE9+ and common mobile devices (default browser). Also, the space around the shape needs to stay transparent (no white element to create the rounded shape can be used)
What's the better option ?
CSS Implementation
You can create a border shape within a container and hide the unwanted parts. I have used view port sized units to be scalable. It can be further improved to your requirement by manipulating with the values.
body {
background: #F5F5F5;
}
.container {
height: 70vh;
overflow: hidden;
display: inline-block;
width: 30vh;
background: white;
margin: 0 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.curve {
background: transparent;
border: 20vh solid #7cc576;
border-radius: 35%;
height: 100vh;
transform: translateY(-20vh);
width: 50vh;
}
.container-left-curved {
transform: rotateY(180deg);
}
.container-right-curved {
transform: rotateY(0deg);
}
<div class="container container-left-curved">
<div class="curve">
</div>
</div>
<div class="container container-right-curved">
<div class="curve">
</div>
</div>
SVG Implementation
I saved your image and generated the optimized SVG code through Inkscape editor. This looks a lot better than a pure CSS solution.
body {
background: lightgray;
}
<svg height="300px" width="200px" version="1.1" viewBox="0 0 492 746.00001" fill="#000">
<g id="layer1" transform="translate(-119.71 -187.93)">
<path id="path3349" d="m189.71 620.93c0-206.67-0.33548-311-1-311-0.55 0-1-2.25-1-5s-0.45-5-1-5-1-1.9984-1-4.441c0-2.4425-0.45-4.7191-1-5.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-1.0984-1-2.441c0-1.3425-0.45-2.7191-1-3.059-0.55-0.33992-1-1.9415-1-3.559s-0.45-2.941-1-2.941-1-0.88631-1-1.9696-0.9-3.572-2-5.5304c-1.1-1.9585-2-4.2222-2-5.0304 0-0.80827-0.45-1.4696-1-1.4696s-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.9-1-2-0.45-2-1-2-1-0.59015-1-1.3114c0-0.72129-0.9-2.2775-2-3.4582s-2-2.7323-2-3.448-0.9-1.8633-2-2.5503c-1.1-0.68696-2-2.0459-2-3.0198 0-0.97393-0.9-2.4195-2-3.2123-1.1-0.79284-2.0021-1.9047-2.0046-2.4708-0.002-0.56608-1.3525-2.4673-3-4.225-1.6474-1.7577-3-3.5577-3.0056-4-0.006-0.44232-2.2557-3.1613-5-6.0422-2.7444-2.8809-4.9897-5.6545-4.9897-6.1636 0-0.50907-2.534-3.4395-5.6312-6.512l-5.6312-5.5864h207.31 207.31l11.311 11.25c6.2212 6.1875 11.317 11.7 11.325 12.25 0.007 0.55 1.788 2.8 3.9571 5s3.9659 4.7875 3.9929 5.75 0.52562 1.75 1.1081 1.75c0.58246 0 0.73793 0.51953 0.34549 1.1545-0.39555 0.64-0.27852 0.88566 0.2626 0.55123 0.98336-0.60775 4.3329 2.601 4.3329 4.1507 0 0.45847 0.9 1.6481 2 2.6436 1.1 0.99549 2 2.6402 2 3.655s0.45 1.845 1 1.845 1 0.59015 1 1.3114c0 0.72129 0.9 2.2775 2 3.4582s2 2.8406 2 3.6886c0 0.84799 0.45 1.5418 1 1.5418s1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.45 2 1 2 1 0.9 1 2 0.47656 2 1.059 2c0.58246 0 0.81241 0.39901 0.51101 0.88669-0.30141 0.48768 0.12204 1.4428 0.94098 2.1224 0.81894 0.67966 1.489 2.0806 1.489 3.1133s0.45 1.8776 1 1.8776 1 1.35 1 3 0.45 3 1 3 1 1.1516 1 2.559c0 1.4514 0.43284 2.2915 1 1.941 0.58342-0.36057 1 0.65628 1 2.441 0 1.6825 0.45 3.059 1 3.059s1 1.8 1 4 0.45 4 1 4 1 1.8 1 4 0.45 4 1 4 1 2.25 1 5 0.45 5 1 5c0.66452 0 1 104 1 310v310h-210-210v-311z"
fill="#7ac474" />
</g>
</svg>
Finally, after looking for the good way to achieve that, here's my notes:
1. RaphaelJS
I think RaphaelJS makes it easy and offers extended compatibility (I tested on IE8 and IE7, it works, even if I don't need it) and easier manipulation.
Here's a live example : http://jsfiddle.net/bkfssykp/
As you can see, this is somewhat a SVG based solution :
paper.path("M0,0h259.478c0,0,42.939,36.419,42.939,88.694 c0,132.905,0,368.306,0,368.306H42.939c0,0,0-235.587,0-368.464C42.939,36.345,0,0,0,0z");
I just pasted the code of my svg shape directly into it. Now, I can play with it : animation, modification, etc.
2. SVG clip-path
My first attempt was an SVG image with a SVG clip-path, as said in the article mentionned by #Deepak : https://css-tricks.com/clipping-masking-css/
Here's a live example : http://jsfiddle.net/xptycnkg/3/
Still SVG : this looks like CSS clip-path, but applied on SVG element. Works on IE9.

Animated Ripples using jquery

I would like to create an animated visualisation (responsive if possible) where the ripples are originating from a central point and when those ripples reach outer nodes in a circle, those nodes create similar ripples of variable size.
So far, I have found these libraries:
https://github.com/mbostock/d3/wiki/Gallery
http://flare.prefuse.org/
But none of them seem to have exactly what I am after and they also seem like an overkill.
What is be the best approach to achieve this?
P.S: I am open to using Adobe's Edge Animate if it offers an easy solution since I create a lot of data visualisations for the new company I am working with.
I think the best approach would be either to use some CSS animations or possibly to use HTML5 canvas and JavaScript with requestAnimationFrame
here is an example of creating a ripple effect with CSS animations on CodePen
.ripple:before,.ripple:after {
content:'';
position:absolute;
}
.ripple:before {
-webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;
}
.ripple:after {
-webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;
}
#-webkit-keyframes rip
{
0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
5% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.4),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.08);
}
100% {
box-shadow:0 0 40px 200px #45c2c5,
0 0 10px 210px transparent,
0 0 30px 220px #45c2c5,
0 0 5px 230px transparent;
}
}

onscroll fix the div and add a class having troublle in mozilla

hello all i am having a page where there are two divs floating left one is of about 360 px and the other is auto width when the page scrolls the left div is added a class which makes it fixed to the screen and allows the oyher div to scroll. it is working in chrome but not in mozilla actually the div gets fixed but the other div gets behind the fixed div.
here is the code
<div id="leftfixop909">
<div id="MKAEitFIXED0">
</div></div>
<div id="otherdiv">
</div>
#leftfixop909{max-width:365px;
min-height:103%;margin- left:-8px;
float:left;width:35%;min-width:360px;
overflow:auto;overflow-x:hidden;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
#MKAEitFIXED0{width:365px;min-height:101%;
background:url(webimg/mainbg.png);
padding-bottom:20px;z-index:99;overflow:auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
.RighTFIXIEDbot{position:fixed;bottom:0px;}
#otherdiv{width:auto;
overflow:hidden;min-height:150%;margin-top:46px;padding-left:20px;}
$(window).scroll(function () {
var height=window.innerHeight;
var DIVHEIG=$("#MKAEitFIXED0").height();
var NOWstoPS=(DIVHEIG-height);
if ($(this).scrollTop() > NOWstoPS) {
$('#MKAEitFIXED0').addClass('RighTFIXIEDbot');
} else if ($(this).scrollTop() < NOWstoPS) {
$('#MKAEitFIXED0').removeClass('RighTFIXIEDbot');
} });
is there anything you can suggest me i think the min-height property is not accepted by mozilla but if a fix the height i get a scroller or may get some matter trimmed .
Here's the code that works for you. Add css for your div's as:
#leftfixop909{
position: absolute;
}
#otherdiv{
position: relative;
}
That's it.

Categories