I'm using PhantomJS to create a png with the following html and I want my hideMe class to be hidden when the png is generated. Unfortunately creating a PDF hides it, but won't for jpg or png. How can I hide the following div with the media query print?
var page = require('webpage').create(),
system = require('system'),
address, output, size;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
console.log(' "800px*600px" window, clipped to 800x600');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
} else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
size = system.args[3].split('*');
if (size.length === 2) {
pageWidth = parseInt(size[0], 10);
pageHeight = parseInt(size[1], 10);
page.viewportSize = { width: pageWidth, height: pageHeight };
page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
} else {
console.log("size:", system.args[3]);
pageWidth = parseInt(system.args[3], 10);
pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
console.log ("pageHeight:",pageHeight);
page.viewportSize = { width: pageWidth, height: pageHeight };
}
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(1);
} else {
page.evaluate(function() {
document.body.bgColor = 'white';
});
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}
<html>
<style type="text/css">
#test1 {
height: 250px;
width: 500px;
background-color:red;
}
#test2 {
height: 250px;
width: 500px;
background-color: blue;
}
#media print {
.hideMe {
display: none !important;
}
}
</style>
<body>
<div id="test1">Test div 1</div>
<div id="test2">Test div 2</div>
<div class="hideMe">This should be hidden</div>
</body>
</html>
Related
At the moment i am using hardcoded height point to trigger visible ScrollToTop Button.
i would love to get solution to be triggered when passing viewport height.
const { scrollDirection } = useScrollDirection()
const { scrollPosition } = useScrollPosition()
const [isVisible, setIsVisible] = useState(false)
const toggleVisible = () => {
if (scrollPosition === 0) {
setIsVisible(false)
}
**if (scrollPosition > 800) {
setIsVisible(true)
} else if (scrollPosition <= 799) {
setIsVisible(false)
}**
}
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
})
}
window.addEventListener("scroll", toggleVisible)
you can use window.innerHeight
const toggleVisible = () => {
const viewportHeight = window.innerHeight;
if (scrollPosition === 0) {
setIsVisible(false)
}
**if (scrollPosition > viewportHeight) {
setIsVisible(true)
} else if (scrollPosition <= viewportHeight) {
setIsVisible(false)
}**
}
You can do this by using Intersection Observer (IO)
First you create an element that is just below the viewport initially. And whenever this element comes into view, show the button.
This requires one dummy element which you observe, for the demo I set the html element to position: relative for it to work. Maybe you can use a different element structure, based on your html. Important thing is that you have one element you can observe and trigger the element depending on when it comes into view.
let options = {
rootMargin: '0px',
threshold: 0.1 // when at least 10% of the element is visible we show the button
}
const callback = (entries, observer) => {
const btn = document.querySelector('#scroll-top');
entries.forEach(entry => {
if (entry.intersectionRatio > 0.1) {
// if we are past our 0.1 threshold we show the button
btn.classList.add('visible')
} else {
// otherwise we hide the button
btn.classList.remove('visible')
}
});
};
const observer = new IntersectionObserver(callback, options);
const target = document.querySelector('#button-trigger');
observer.observe(target);
.dummy-viewport {
min-height: 400vh;
}
html {
position: relative;
}
#button-trigger {
position: absolute;
top: 100vh;
left: 10px;
height: calc(100% - 100vh);
/* for demo purposes, don't show the element on the finished site*/
width: 2rem;
outline: 1px solid rebeccapurple;
writing-mode: vertical-rl;
text-orientation: mixed;
}
p {
padding: 0;
margin: 0;
}
#scroll-top {
position: fixed;
bottom: 40px;
right: 10px;
opacity: 0;
transition: .5s opacity;
}
#scroll-top.visible {
opacity: 1
}
<div class="dummy-viewport">
<p> Scroll down ↓ </p>
<button id="scroll-top" type="button"> Scroll to top </button>
</div>
<div id="button-trigger">
<p> When I am visible, I show the button </p>
</div>
I am trying to stop my section content from scaling with my section background. the scale of the background is perfect but it seems to make the content scale also, I am using gsap library I have tried creating a container inside the section and give it absolute but nothing I do stops the content inside from scaling
//First the variables our app is going to use need to be declared
//References to DOM elements
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $("nav a").filter("[href^=#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $sectionsContainer = $(".sections-container");
var $sections = $(".section");
var $currentSection = $sections.first();
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Key codes for up and down arrows on keyboard. We'll be using this to navigate change sections using the keyboard
var keyCodes = {
UP : 38,
DOWN: 40
}
//Going to the first section
goToSection($currentSection);
/*
* Adding event listeners
* */
$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSection);
$navGoNext.on("click", goToNextSection);
/*
* Internal functions
* */
/*
* When a button is clicked - first get the button href, and then section to the container, if there's such a container
* */
function onNavButtonClick(event)
{
//The clicked button
var $button = $(this);
//The section the button points to
var $section = $($button.attr("href"));
//If the section exists, we go to it
if($section.length)
{
goToSection($section);
event.preventDefault();
}
}
/*
* Getting the pressed key. Only if it's up or down arrow, we go to prev or next section and prevent default behaviour
* This way, if there's text input, the user is still able to fill it
* */
function onKeyDown(event)
{
var PRESSED_KEY = event.keyCode;
if(PRESSED_KEY == keyCodes.UP)
{
goToPrevSection();
event.preventDefault();
}
else if(PRESSED_KEY == keyCodes.DOWN)
{
goToNextSection();
event.preventDefault();
}
}
/*
* When user scrolls with the mouse, we have to change sections
* */
function onMouseWheel(event)
{
//Normalize event wheel delta
var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
//If the user scrolled up, it goes to previous section, otherwise - to next section
if(delta < -1)
{
goToNextSection();
}
else if(delta > 1)
{
goToPrevSection();
}
event.preventDefault();
}
/*
* If there's a previous section, section to it
* */
function goToPrevSection()
{
if($currentSection.prev().length)
{
goToSection($currentSection.prev());
}
}
/*
* If there's a next section, section to it
* */
function goToNextSection()
{
if($currentSection.next().length)
{
goToSection($currentSection.next());
}
}
/*
* Actual transition between sections
* */
function goToSection($section)
{
//If the sections are not changing and there's such a section
if(!isAnimating && $section.length)
{
//setting animating flag to true
isAnimating = true;
//Sliding to current section
TweenLite.set($currentSection, {autoAlpha: 0, display: 'none'});
$currentSection = $section;
TweenLite.set($currentSection, {display: 'block'});
TweenLite.fromTo($currentSection, 0.6, {scale: 0.9, autoAlpha: 0}, {scale: 1, autoAlpha: 1, ease: Power1.easeOut, onComplete: onSectionChangeEnd, onCompleteScope: this});
//Animating menu items
TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});
TweenLite.to($navButtons.filter("[href=#" + $currentSection.attr("id") + "]"), 0.5, {className: "+=active"});
}
}
/*
* Once the sliding is finished, we need to restore "isAnimating" flag.
* You can also do other things in this function, such as changing page title
* */
function onSectionChangeEnd()
{
isAnimating = false;
}
/*
* When user resize it's browser we need to know the new height, so we can properly align the current section
* */
function onResize(event)
{
//This will give us the new height of the window
var newPageHeight = $window.innerHeight();
/*
* If the new height is different from the old height ( the browser is resized vertically ), the sections are resized
* */
if(pageHeight !== newPageHeight)
{
pageHeight = newPageHeight;
//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
TweenLite.set([$sectionsContainer, $sections], {height: pageHeight + "px"});
//The current section should be always on the top
TweenLite.set($sectionsContainer, {scrollTo: {y: pageHeight * $currentSection.index() }});
}
}
body, div, p {
margin: 0;
padding: 0;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
letter-spacing: 0.0625em;
background-color: #000;
}
h1{
color: #fff;
}
.sections-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.section {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
visibility: hidden;
opacity: 0;
}
#section-1 {
display: block;
visibility: visible;
opacity: 1;
}
.section .centered h1 {
text-align: center;
}
.section .centered p {
text-align: center;
}
#section-1 {
background-color: #5A4748;
}
#section-2 {
background-color: #45959b;
}
#section-3 {
background-color: #778899;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<div class="sections-container">
<div class="section" id="section-1">
<div class="centered">
<h1>1</h1>
</div>
</div>
<div class="section" id="section-2">
<div class="centered">
<h1>2</h1>
</div>
</div>
<div class="section" id="section-3">
<div class="centered">
<h1>3</h1>
</div>
</div>
</div>
Would this be what you're looking for? I basically added a background div
<div id="background"></div>
#background {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
visibility: visible;
opacity: 1;
}
which is assigned a background class based on the section which is currently visible.
var $background = $("#background");
...
$background.classList = "";
TweenLite.set($background, {
className: '+=bg-' + ($sections.index($currentSection) + 1)
});
TweenLite.fromTo($background, 0.6, {
scale: 0.9,
autoAlpha: 0
}, {
scale: 1,
autoAlpha: 1,
ease: Power1.easeOut,
onComplete: onSectionChangeEnd,
onCompleteScope: this
});
You can choose to remove the autoAlpha tween on the section numbers if you so prefer.
//First the variables our app is going to use need to be declared
//References to DOM elements
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $("nav a").filter("[href^=#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $sectionsContainer = $(".sections-container");
var $sections = $(".section");
var $background = $("#background");
var $currentSection = $sections.first();
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Key codes for up and down arrows on keyboard. We'll be using this to navigate change sections using the keyboard
var keyCodes = {
UP: 38,
DOWN: 40
}
//Going to the first section
goToSection($currentSection);
/*
* Adding event listeners
* */
$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSection);
$navGoNext.on("click", goToNextSection);
/*
* Internal functions
* */
/*
* When a button is clicked - first get the button href, and then section to the container, if there's such a container
* */
function onNavButtonClick(event) {
//The clicked button
var $button = $(this);
//The section the button points to
var $section = $($button.attr("href"));
//If the section exists, we go to it
if ($section.length) {
goToSection($section);
event.preventDefault();
}
}
/*
* Getting the pressed key. Only if it's up or down arrow, we go to prev or next section and prevent default behaviour
* This way, if there's text input, the user is still able to fill it
* */
function onKeyDown(event) {
var PRESSED_KEY = event.keyCode;
if (PRESSED_KEY == keyCodes.UP) {
goToPrevSection();
event.preventDefault();
} else if (PRESSED_KEY == keyCodes.DOWN) {
goToNextSection();
event.preventDefault();
}
}
/*
* When user scrolls with the mouse, we have to change sections
* */
function onMouseWheel(event) {
//Normalize event wheel delta
var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
//If the user scrolled up, it goes to previous section, otherwise - to next section
if (delta < -1) {
goToNextSection();
} else if (delta > 1) {
goToPrevSection();
}
event.preventDefault();
}
/*
* If there's a previous section, section to it
* */
function goToPrevSection() {
console.log($currentSection.prev().length > 0);
if ($currentSection.prev().length) {
goToSection($currentSection.prev());
}
}
/*
* If there's a next section, section to it
* */
function goToNextSection() {
if ($currentSection.next().length > 0) {
goToSection($currentSection.next());
}
}
/*
* Actual transition between sections
* */
function goToSection($section) {
//If the sections are not changing and there's such a section
if (!isAnimating && $section.length) {
//setting animating flag to true
isAnimating = true;
//Sliding to current section
TweenLite.set($currentSection, {
autoAlpha: 0,
display: 'none'
});
$currentSection = $section;
$background.classList = "";
TweenLite.set($currentSection, {
display: 'block'
});
TweenLite.set($background, {
className: 'bg-' + ($sections.index($currentSection) + 1)
});
//console.log($sections.index($currentSection) + 1);
TweenLite.fromTo($background, 0.6, {
scale: 0.9,
autoAlpha: 0
}, {
scale: 1,
autoAlpha: 1,
ease: Power1.easeOut,
onComplete: onSectionChangeEnd,
onCompleteScope: this
});
TweenLite.fromTo($currentSection, 0.6, {
autoAlpha: 0
}, {
autoAlpha: 1,
ease: Power1.easeOut,
});
//Animating menu items
TweenLite.to($navButtons.filter(".active"), 0.5, {
className: "-=active"
});
TweenLite.to($navButtons.filter("[href=#" + $currentSection.attr("id") + "]"), 0.5, {
className: "+=active"
});
}
}
/*
* Once the sliding is finished, we need to restore "isAnimating" flag.
* You can also do other things in this function, such as changing page title
* */
function onSectionChangeEnd() {
isAnimating = false;
}
/*
* When user resize it's browser we need to know the new height, so we can properly align the current section
* */
function onResize(event) {
//This will give us the new height of the window
var newPageHeight = $window.innerHeight();
/*
* If the new height is different from the old height ( the browser is resized vertically ), the sections are resized
* */
if (pageHeight !== newPageHeight) {
pageHeight = newPageHeight;
//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
TweenLite.set([$sectionsContainer, $sections], {
height: pageHeight + "px"
});
//The current section should be always on the top
TweenLite.set($sectionsContainer, {
scrollTo: {
y: pageHeight * $currentSection.index()
}
});
}
}
body,
div,
p {
margin: 0;
padding: 0;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
letter-spacing: 0.0625em;
background-color: #000;
}
h1 {
color: #fff;
}
.sections-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.section {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
visibility: hidden;
opacity: 0;
}
#section-1 {
display: block;
visibility: visible;
opacity: 1;
}
.section .centered h1 {
text-align: center;
}
.section .centered p {
text-align: center;
}
#background {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
visibility: visible;
opacity: 1;
}
.bg-1 {
background-color: #5A4748;
}
.bg-2 {
background-color: #45959b;
}
.bg-3 {
background-color: #778899;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<div id="background"></div>
<div class="sections-container">
<div class="section" id="section-1">
<div class="centered">
<h1>1</h1>
</div>
</div>
<div class="section" id="section-2">
<div class="centered">
<h1>2</h1>
</div>
</div>
<div class="section" id="section-3">
<div class="centered">
<h1>3</h1>
</div>
</div>
</div>
I am working on a photo gallery in AngularJS using Angular Material (run the snippet in fullscreen to see my problem).
var app = angular.module('app', ['ngMaterial']);
app.controller('TitleController', function($scope) {
$scope.title = 'Gallery';
});
app.controller('GalleryCtrl', function($scope, $http, $q, $mdMedia, $mdDialog) {
//https://material.angularjs.org/latest/demo/virtualRepeat
$scope.Images = [],
//add more images
$scope.LoadMore = function() {
for (i = 0; i < 25; i++) {
var randomWidth = Math.round(Math.random() * (800 - 400) + 400);
var randomHeight = Math.round(Math.random() * (800 - 400) + 400);
$scope.Images.push({
src: "http://placehold.it/" + randomWidth + "x" + randomHeight + "/",
id: Math.round(Math.random() * 10000)
});
};
}
$scope.ShowDetails = function(ev, number) {
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
$mdDialog.show({
controller: DialogController,
templateUrl: 'Home/GetInfo?id=' + number,
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: useFullScreen
})
$scope.$watch(function() {
return $mdMedia('xs') || $mdMedia('sm');
}, function(wantsFullScreen) {
$scope.customFullscreen = (wantsFullScreen === true);
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
//initial loading
$scope.LoadMore();
});
body {
background: #eeeeee;
}
html {
background: #eeeeee;
}
.gridListdemoBasicUsage md-grid-list {
margin: 8px;
}
.gridListdemoBasicUsage .green {
background: #b9f6ca;
}
.gridListdemoBasicUsage md-grid-tile {
transition: all 400ms ease-out 50ms;
}
.responsiveImage {
max-width: 100%;
max-height: 100%;
}
md-content {
background: #eeeeee;
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.toolbardemoScrollShrink .face {
width: 48px;
margin: 16px;
border-radius: 48px;
border: 1px solid #ddd;
}
.md-toolbar-tools {
background-color: #259b24;
}
.dialogdemoBasicUsage #popupContainer {
position: relative;
}
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px;
}
.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px;
}
.dialogdemoBasicUsage button {
width: 200px;
}
.dialogdemoBasicUsage div#status {
color: #c60008;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
<body ng-app="app" ng-controller="GalleryCtrl as gc" ng-cloak="" id="popupContainer" class="gridListdemoBasicUsage dialogdemoBasicUsage">
<md-toolbar md-scroll-shrink="" ng-if="true" ng-controller="TitleController">
<div class="md-toolbar-tools">
<h3><span>{{title}}</span></h3>
</div>
</md-toolbar>
<md-content style="height:100vh" />
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile ng-click="ShowDetails($event, n.id)" ng-repeat="n in Images" class="green">
<img class="responsiveImage" src="{{n.src}}">
<md-grid-tile-footer>
<h3>Photo number {{n.id}}</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
<md-button class="md-raised md-primary" ng-click="LoadMore()">Primary</md-button>
</section>
</body>
Go fullscreen, scroll to the bottom of the page, and press a button to load more images. The problem I'm having: I am trying to get the toolbar at the top of the screen to disappear when scrolling down, and appear again when scrolling up. However, 2 scrollbars appear, and only the right one affects the toolbar.The left scrollbar actually scrolls all the way down on the page.
My desired situation: only 1 visible scrollbar to scroll down the entire gallery, that also makes the toolbar appear and disappear. How do I do this?
try adding overflow-y: hidden; to the body css rule.
if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}
body{
padding:0;
margin:0;
background-color: #19321D;
color: #53CC66;
line-height: 1.5;
font-family: FreeMono, monospace;
cursor: url(cursor.png), pointer;
}
a{
text-decoration: none;
color: #53CC66;
}
ul{
text-decoration: none;
list-style-type: none;
}
#header{
text-align: center;
border-bottom: 3px solid #53CC66;
margin-bottom: 100px;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
line-height: 1;
}
h1, h2, h3{
color: #53CC66;
font-family: FreeMono, monospace;
font-size: 15px;
}
a{
cursor: url(cursor.png), pointer;
}
a:hover {
cursor: url(cursor.png), pointer;
color: #19321D;
}
li:hover{
background-color:#53CC66;
color: #19321D;
}
li:hover a{
color: #19321D;
}
<html>
<head>
<title>Getrate|Command promph </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles15.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DAVID SECRET INDUSTRIES UNVERIFIED SYSTEM</h1>
<h2>COPYRIGHT 2015 - 2050 ALL RIGHT RESERVED</h2>
<h3>- SERVER #1 -</h3>
</div>
<ul>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.3.8.9.84.113.21.73</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.4.8.9.84.113.21.74</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.5.8.9.84.113.21.75</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.6.8.9.84.113.21.76</li>
<li>[CONZOLE] > -TOP SECRET- . PAGE //stripslash 1.7.8.9.84.113.21.77</li>
</ul>
</div>
</body>
<script src="wow.js"></script>
</html>
I just thought, is there any possible way, to make custom cursor, that works on microsoft edge? On my website, i used this:
body{ cursor: url(cursor.png), pointer;}
but in microsoft edge, it is not working...
Any ideas how to solve this?/Is there any other way?
So.... after small recode, my website looks like this, see the fiddle and try, it is not working yet...
This property is not supported yet : http://caniuse.com/#search=cursor
This property is now supported : caniuse.com:cursor:url()
As Charaf mentioned: the property isn't yet supported in Edge. If your project requires a solution, you can sort of mimic the behavior with JavaScript.
JavaScript:
if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
var myCursor = document.createElement('img');
myCursor.src = 'cursor.png';
myCursor.style.position = 'absolute';
document.body.appendChild(myCursor);
document.addEventListener('mousemove', function(e) {
myCursor.style.left = e.pageX+'px';
myCursor.style.top = e.pageY+'px';
}, false);
}
I made a library called CursorJS for you. You can check it out here. If you scroll to the bottom of the JavaScript code, you can find initializing code:
/* Enable lib with cursor image src */
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
In your case just do the following:
/* Enable lib with cursor image src */
CursorJS.enable('./cursor.png');
CursorJS.addEl(document.body);
Customization
CursorJS has a mouseOffset variable. It repesents difference of mouse position and position of image. For example, if I set it to
mouseOffset: {
x: 50,
y: 50
},
The mouse will be 50px off. The reason why I made this variable is that custom mouse was kind of "blinking", try to set it to {x:1,y:1} ;)
Live example
var CursorJS = {
img: new Image(),
els: [],
mouseOffset: {
x: 5,
y: 5
},
addedImg: false,
checkForIE: function() {
return (/MSIE/i.test(navigator.userAgent)
|| /rv:11.0/i.test(navigator.userAgent));
},
setDisplay: function() {
this.img.style.display =
this.els.indexOf(true) > -1 ? null : 'none';
},
getMouseCoords: function(e) {
var mx = 0, my = 0;
if (this.checkForIE())
mx = event.clientX + document.body.scrollLeft,
my = event.clientY + document.body.scrollTop;
else
mx = e.pageX,my = e.pageY;
if (mx < 0) mx = 0;
if (my < 0) my = 0;
return [mx, my];
},
mouseOver: function(e, id) {
this.els[id] = true;
this.setDisplay();
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
mouseOut: function(e, id) {
this.els[id] = false;
this.setDisplay();
},
mouseMove: function(e) {
var coords = this.getMouseCoords(e);
this.img.style.left =
(coords[0]+this.mouseOffset.x) + 'px';
this.img.style.top =
(coords[1]+this.mouseOffset.y) + 'px';
},
addEvent: function(el, name, func, bool) {
if (el == null || typeof name != 'string'
|| typeof func != 'function'
|| typeof bool != 'boolean')
return;
if (el.addEventListener)
el.addEventListener(name, func, false);
else if (el.attachEvent)
el.attachEvent('on' + name, func);
else
el['on' + name] = func;
},
addEl: function(el) {
var evts = ['over','out','move'],
id = this.els.length;
this.els.push(false);
this.el = el;
this.addEvent(el, 'mouseover', function(e) {
this.mouseOver(e, id) }.bind(this), false);
this.addEvent(el, 'mouseout', function(e) {
this.mouseOut(e, id) }.bind(this), false);
this.addEvent(el, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (typeof el['style'] != 'undefined')
el.style.cursor = 'none';
},
enable: function(src) {
this.img.src = src;
this.img.style.display = 'none';
this.img.style.position = 'absolute';
this.img.style.cursor = 'none';
this.addEvent(this.img, 'mousemove', function(e) {
this.mouseMove(e) }.bind(this), false);
if (!this.addedImg)
document.body.appendChild(this.img),
this.addedImg = true;
}
}
/*** INITIALIZE ***/
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));
.myElement1, .myElement2, .myElement3 {
width: 150px;
height: 150px;
border: 1px solid gray;
display: inline-block;
}
<div class="myElement1">added</div>
<div class="myElement2">not added</div>
<div class="myElement3">added</div>
Hope that worked! Have a nice day :)
I have a problem with a script for a image gallery. The problem seems to only occur on Safari and Chrome, but if I refresh the page I get it to work correctly - weird!
Correct function:
The gallery has a top bar, which if you hover over it, it will display a caption. Below sits the main image. At the bottom there is another bar that is a reversal of the top bar. When you hover over it, it will display thumbnails of the gallery.
The problem:
In Safari and Chrome, the thumbnail holder will not display. In fact, it doesn't even show it as an active item (or a rollover). But oddly enough, if you manually refresh the page it begins to work correctly for the rest of the time you view the page. Once you have left the page and return the same error occurs again and you have to go through the same process.
Here's one of the pages to look at:
link text
Here's the CSS:
#ThumbsGutter {
background: url(../Images/1x1.gif);
background: url(/Images/1x1.gif);
height: 105px;
left: 0px;
position: absolute;
top: 0px;
width: 754px;
z-index: 2;
}
#ThumbsHolder {
display: none;
}
#ThumbsTable {
left: 1px;
}
#Thumbs {
background-color: #000;
width: 703px;
}
#Thumbs ul {
list-style: none;
margin: 0;
padding: 0;
}
#Thumbs ul li {
display: inline;
}
.Thumbs ul li a {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
float: left;
left: 1px;
}
.Thumbs ul li a img {
filter: alpha(opacity=50);
height: 104px;
opacity: .5;
width: 140px;
}
.Thumbs ul li a img.Hot {
filter: alpha(opacity=100);
opacity: 1;
}
Here is the javascript:
//Variables
var globalPath = "";
var imgMain;
var gutter;
var holder;
var thumbs;
var loadingImage;
var holderState;
var imgCount;
var imgLoaded;
var captionHolder;
var captionState = 0;
var captionHideTimer;
var captionHideTime = 500;
var thumbsHideTimer;
var thumbsHideTime = 500;
$(document).ready(function() {
//Load Variables
imgMain = $("#MainImage");
captionHolder = $("#CaptionHolder");
gutter = $("#ThumbsGutter");
holder = $("#ThumbsHolder");
thumbs = $("#Thumbs");
loadingImage = $("#LoadingImageHolder");
//Position Loading Image
loadingImage.centerOnObject(imgMain);
//Caption Tab Event Handlers
$("#CaptionTab").mouseover(function() {
clearCaptionHideTimer();
showCaption();
}).mouseout(function() {
setCaptionHideTimer();
});
//Caption Holder Event Handlers
captionHolder.mouseenter(function() {
clearCaptionHideTimer();
}).mouseleave(function() {
setCaptionHideTimer();
});
//Position Gutter
if (jQuery.browser.safari) {
gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 89) + "px");
} else {
gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
}
//gutter.css("left", imgMain.position().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - 105) + "px");
//gutter.css("left", imgMain.offset().left + "px").css("top", ((imgMain.offset().top + imgMain.height()) - gutter.height()) + "px");
//Thumb Tab Event Handlers
$("#ThumbTab").mouseover(function() {
clearThumbsHideTimer();
showThumbs();
}).mouseout(function() {
setThumbsHideTimer();
});
//Gutter Event Handlers
gutter.mouseenter(function() {
//showThumbs();
clearThumbsHideTimer();
}).mouseleave(function() {
//hideThumbs();
setThumbsHideTimer();
});
//Next/Prev Button Event Handlers
$("#btnPrev").mouseover(function() {
$(this).attr("src", globalPath + "/Images/GalleryLeftButtonHot.jpg");
}).mouseout(function() {
$(this).attr("src", globalPath + "/Images/GalleryLeftButton.jpg");
});
$("#btnNext").mouseover(function() {
$(this).attr("src", globalPath + "/Images/GalleryRightButtonHot.jpg");
}).mouseout(function() {
$(this).attr("src", globalPath + "/Images/GalleryRightButton.jpg");
});
//Load Gallery
//loadGallery(1);
});
function loadGallery(galleryID) {
//Hide Holder
holderState = 0;
holder.css("display", "none");
//Hide Empty Gallery Text
$("#EmptyGalleryText").css("display", "none");
//Show Loading Message
$("#LoadingGalleryOverlay").css("display", "inline").centerOnObject(imgMain);
$("#LoadingGalleryText").css("display", "inline").centerOnObject(imgMain);
//Load Thumbs
thumbs.load(globalPath + "/GetGallery.aspx", { GID: galleryID }, function() {
$("#TitleHolder").html($("#TitleContainer").html());
$("#DescriptionHolder").html($("#DescriptionContainer").html());
imgCount = $("#Thumbs img").length;
imgLoaded = 0;
if (imgCount == 0) {
$("#LoadingGalleryText").css("display", "none");
$("#EmptyGalleryText").css("display", "inline").centerOnObject(imgMain);
} else {
$("#Thumbs img").load(function() {
imgLoaded++;
if (imgLoaded == imgCount) {
holder.css("display", "inline");
//Carousel Thumbs
thumbs.jCarouselLite({
btnNext: "#btnNext",
btnPrev: "#btnPrev",
mouseWheel: true,
scroll: 1,
visible: 5
});
//Small Image Event Handlers
$("#Thumbs img").each(function(i) {
$(this).mouseover(function() {
$(this).addClass("Hot");
}).mouseout(function() {
$(this).removeClass("Hot");
}).click(function() {
//Load Big Image
setImage($(this));
});
});
holder.css("display", "none");
//Load First Image
var img = new Image();
img.onload = function() {
imgMain.attr("src", img.src);
setCaption($("#Image1").attr("alt"));
//Hide Loading Message
$("#LoadingGalleryText").css("display", "none");
$("#LoadingGalleryOverlay").css("display", "none");
}
img.src = $("#Image1").attr("bigimg");
}
});
}
});
}
function showCaption() {
if (captionState == 0) {
$("#CaptionTab").attr("src", globalPath + "/Images/CaptionTabHot.jpg");
captionHolder.css("display", "inline").css("left", imgMain.position().left + "px").css("top", imgMain.position().top + "px").css("width", imgMain.width() + "px").effect("slide", { "direction": "up" }, 500, function() {
captionState = 1;
});
}
}
function hideCaption() {
if (captionState == 1) {
captionHolder.toggle("slide", { "direction": "up" }, 500, function() {
$("#CaptionTab").attr("src", globalPath + "/Images/CaptionTab.jpg");
captionState = 0;
});
}
}
function setCaptionHideTimer() {
captionHideTimer = window.setTimeout(hideCaption,captionHideTime);
}
function clearCaptionHideTimer() {
if(captionHideTimer) {
window.clearTimeout(captionHideTimer);
captionHideTimer = null;
}
}
function showThumbs() {
if (holderState == 0) {
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTabHot.jpg");
holder.effect("slide", { "direction": "down" }, 500, function() {
holderState = 1;
});
}
}
function hideThumbs() {
if (holderState == 1) {
if (jQuery.browser.safari) {
holder.css("display", "none");
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
} else {
holder.toggle("slide", { "direction": "down" }, 500, function() {
$("#ThumbTab").attr("src", globalPath + "/Images/ThumbTab.jpg");
holderState = 0;
});
}
}
}
function setThumbsHideTimer() {
thumbsHideTimer = window.setTimeout(hideThumbs,thumbsHideTime);
}
function clearThumbsHideTimer() {
if(thumbsHideTimer) {
window.clearTimeout(thumbsHideTimer);
thumbsHideTimer = null;
}
}
function setImage(image) {
//Show Loading Image
loadingImage.css("display", "inline");
var img = new Image();
img.onload = function() {
//imgMain.css("background","url(" + img.src + ")").css("display","none").fadeIn(250);
imgMain.attr("src", img.src).css("display", "none").fadeIn(250);
setCaption(image.attr("alt"));
//Hide Loading Image
loadingImage.css("display", "none");
};
img.src = image.attr("bigimg");
}
function setCaption(caption) {
$("#CaptionText").html(caption);
//alert($("#CaptionText").html());
/*
if (caption.length > 0) {
$("#CaptionText")
.css("display", "inline")
.css("left", imgMain.position().left + "px")
.css("top", imgMain.position().top + "px")
.css("width", imgMain.width() + "px")
.html(caption);
$("#CaptionOverlay").css("display", "inline")
.css("height", $("#CaptionText").height() + 36 + "px")
.css("left", imgMain.position().left + "px")
.css("top", imgMain.position().top + "px")
.css("width", imgMain.width() + "px");
} else {
$("#CaptionText").css("display", "none");
$("#CaptionOverlay").css("display", "none");
}
*/
}
Please if anyone could help, it would be greatly appreciated!
Thanks in advance.
Justin
I'm using Chrome 4.1.249.1064 and the top bar works perfect, I see the caption without refreshing the page.
The same in Firefox 3.6.3, all works perfect
Same with Safari 4.0.3, all works perfect