I have a MooTools script, which handles panel with buttons (switching the panel content).
Here is the script - every button sets corresponding panel visible + change a background of itself:
buttons.addEvent('mouseenter', function(button){
var panel = 'panel-' + this.get("id");
$$('.panel').setStyle('display','none');
$(panel).setStyle('display','block');
buttons.setStyle('background',null);
this.setStyle('background','#183c7c');
});
For IE (tried in 8 and 9), the last row of the script does not work - the background of button itself is not changed. For Firefox and Chrome it works fine.
It is working for me under IE9: http://jsfiddle.net/EWUeP/
html:
<div id="divy"></div>
css:
div{
width:300px;
height: 300px;
background-color: #eee000;
}
js:
var d = document.id('divy');
d.setStyle('background','#183c7c');
But nevertheless if you want only to change bg color - call the correct css: d.setStyle('background-color','red'); background rule is the global rule for all background css types [color url position repeat etc..]
Related
Here is what you need to do in order to have a clear view of what I want
Go on this editor
create a shape
select it
rotate it
place your mouse on one of the resize control point then click
you'll see the cursor rotated with the angle of the shape.
I can't find any CSS properties to achieve this kind of thing, how could this be done?
You can't and it doesn't. It just displays the different resize icons. See for example: http://css-cursor.techstream.org/
I needed a rotating arrow cursor for a carousel. Here's what I came up with:
https://codepen.io/addison912/pen/MWwmpoz
Start by hiding the default cursor in css:
body * {
cursor: none;
}
add the image of the cursor you'd like to use to html:
<div id="cursor">
<img alt="Cursor Arrow" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg"/>
</div>
This image needs to track cursor position:
let currentCursorPos;
let cursorEl = document.querySelector("#cursor");
window.addEventListener("mousemove", event => {
currentCursorPos = { x: event.clientX, y: event.clientY };
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
})
Now you can rotate the #cursor img as needed.
Yes, in modern browsers (Chrome, Firefox, Safari) you can use an SVG encoded as a data URI as the CSS cursor:
cursor: url("data:image/svg+xml, ... ") 16 16, auto;
Encoding the SVG can be tricky, but is well documented here:
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
The trick is then modifying the encoded SVG's transform property on the fly:
<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>
For instance, in the above example you'd swap out 45 for your desired angle.
Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?
My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.
...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
<li>
...
<script type="text/javascript">
//Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
var nav = document.getElementById("pinned_nav");
var nav_copy = nav.cloneNode(true);
nav_copy.classList.remove("w3-top");
nav.parentElement.insertBefore(nav_copy, nav);
</script>
...
Since this seemed less error prone than just copy and pasting the HTML block.
But it's still rather clunky and I just wondered if there was a simpler way I was missing.
Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.
You could use a Javascript script to get the height and append it however you want to use it.
function getHeight() {
var nav = document.getElementById("pinned_nav");
var nav_height = nav.offsetHeight; //append this var where you need to.
alert(nav_height);
};
window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page
#pinned_nav {
height: 100px;
/*as example */
background-color: red;
}
<div id="pinned_nav" class="w3-top"></div>
EDT
Added resize event subscription.
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.
OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().
I'm working on an HTML page. This page allows the user to choose an image that will serve as the "background-image" attribute value for a DIV. The user may also choose a color that will kind of shade the image.
In an attempt to build this, I found this site: http://doodles.tev.net/texture2/. Its doing exactly what I want. However, the code in my app doesn't seem to apply the background-color appropriately. If the background-image value is set, the background-color has no impact. Here is what I have:
<div id="myDiv" style="height:200px; width:200px; border:1px solid black; display:inline-block;"> </div>
function updateMyDiv() {
var bg = getBG();
$("#myDiv").css("background-color", bg);
var fg = getFG();
$("#myDiv").css("color", fg);
var txt = getTxt();
if ((txt != null) && (txt.path != null) && (txt.path.length > 0)) {
$("#myDiv").css("background-image", 'url(' + txt.path + ')');
} else {
$("#myDiv").css("background-image", '');
}
}
Why does the site that linked to apply a tint to "60 Degree Gray" when I choose a color. However, in my app, a tint never gets applied.
Thank you
If you supply a background image, it will always appear on top of the background color. Background color is usually used as a fallback, in case the background image returns 404, or, the image doesn't cover all of the background.
If you look closer into the site you linked to, you'll see the images are semi-transparent; I think this could be your problem. are your images semi-transparent?