I have this in CSS :
#box:target {
box-shadow: 0px 0px 20px black;
}
On a "parent" page (page1), I have a button that makes you go to another page : "page2.html#box". So the #box:target is applied when I the page is loaded.
But with a button on the page1, I activate a function which purpose is to change the #box:target properties. I'm looking for a way to change this in javascript. Not :focus.
Notice to Readers
This Answer Concerns the Original Post First Draft
The OP has been edited to an entirely different question. So if this answer is confusing, you'll need to review the edits. I apologize for any inconvenience.
:target
You do not need JavaScript for simple style switch. It appears that you have misunderstood the requirements needed to implement :target pseudo-class.
Requirements
Two <a>nchor tags and a tag of any type as the target.
<a>ON</a> <a>OFF</a> <section>SECTION</section>
One <a> will "turn on" the new <section> style and the other <a> will "turn it off".
Next, the <section> needs an #id. Both <a> need an href attribute. The values of each href is different from the other and is specific (see comment below this example):
ON OFF <section id="S">SECTION</section>
ON: Must be ☝ OFF: Must be a ☝
the #id of target: #S "non-jumping" value #/
In the CSS, add two rule sets:
The first one is the target tag at default (OFF):
#S { width: 44vw; height: 44vw; border: 4px solid #444 }
The second one is the target tag activated (ON). Suffix the :target pseudo-class:
#S:target { text-shadow: 4px 4px 4px 4px #444; }
Here's what the HTML layout should look like more or less:
ON OFF <section id="S">SECTION</section>
Demo
html,
body {
font: 900 10vh/1 Consolas;
}
a {
color: blue;
}
a:hover,
a:active {
color: cyan;
}
#B {
box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
border: 6px inset rgba(0, 0, 0, 0.8);
width: 40vw;
height: 40vh;
font-size: 20vh;
text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}
#B:target {
box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}
<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>
<figure id='B' class='box'>
<figcaption>BOX</figcaption>
</figure>
Related
I am trying to incorporate css styles associated with particular div class names using node.style. I can get the styles to work individually but I am trying to implement multiple styles that span within one another using the div classes mentioned. I am wondering if there is a way of doing this using an easier method or can it be done at all?
var node = document.createElement("wall-post");
var image = new Image();
image.src = obj.picture;
node.appendChild(image);
node.style=' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;';
document.body.appendChild(node);
The style property on an element isn't a string, it's an object with properties for the styles. You set them individually.
node.style.display = 'inline-block';
node.style.margin = '15px';
node.style.marginTop = '30px';
node.style.borderRadius = /*?? Your question just has 'px' */;
node.style.overflowY = 'hidden';
node.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
node.style.float = 'left';
Note that you use the camelCase version (well, or node.style["margin-top"] = "...").
Alternately, if you want to completely replace the style, you can do that by using setAttribute to replace the style entirely:
node.setAttribute('style', ' display: inline-block;margin: 15px;margin-top: 30px; border-radius: px;overflow-y: hidden;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float:left;');
All of that aside: In general, supplying style information in JavaScript code isn't a great pattern to follow. Create a descriptive class, then use that class on the element.
You can also use node.className = "yourclass" and use css to define the styling of that class
.yourclass {
display: inline-block;
margin: 15px;
margin-top: 30px;
border-radius: px;
overflow-y: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float:left;
}
The style property is related to the style attribute which accepts, as its value, the body of a CSS rule-set. It associates those rules with the particular element.
Selectors, including class selectors, appear outside the rule-set's body and cannot be included in a style attribute. (It doesn't make sense to do so anyway, the style attribute is associated with a specific element, so there is no point is selecting a different one from that context).
I'm very new to front-end coding. I'm creating my own responsive website using Bootstrap 3.
When I resize my browser window to simulate the size of a phone screen, I want the nav bar color (nav header color?) to change to white on Menu Icon click.
I want it to stay transparent on page load and that is working. I want the header to change to white while scrolling and that is also working. When the hamburger menu icon is clicked, the collapsible nav header drops down to reveal the menu items, but the background remains transparent, causing the menu items to lay on top of the content below.
I wrote the following script but it doesn't seem to work. Does anyone have suggestions?
<script>
var windowsize = $(window).width();
$(window).resize(funtion() {
windowsize = $(window).width();
if (windowsize < 440) {
$("#myNavbar").click(function () {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
});
};
});
</script>
You can use Media Queries in your CSS file for what you need.
#media screen and (max-width: 300px) {
nav {
background-color: #ffffff;
}
}
Since you are only changing the color on click, you don't need a window.resize() event.
<script>
$("#myNavbar").click(function () {
windowsize = $(window).width();
if (windowsize < 440) {
$(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
}
});
</script>
I would suggest changing the dynamic CSS to use a class though too. The JS would change to $(".navbar-header").addClass("active"); and you can define the active class in your css files.
Using media queries is the best way to make a css property dependent on the screen size.
Here is some code that might suit your needs:
.nav-bar {
#media only screen and (max-width: 420px) {background:#fff;}
}
This makes the nav-bar white if the screen width is 420px or less.
I'd do this via a class toggle in JS and a CSS media query.
JS -
$("#myNavbar").click(function() {
$(".navbar-header").toggleClass('.active-nav')
});
CSS -
#media only screen and (min-width:440px) {
.navbar-header.active-nav {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
}
}
Try the following:
$("#myNavbar").click(function () {
$(".navbar-header").addClass("navbar-header-mobile");
});
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.navbar-header-mobile {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You just need to add something that removes it on the phone if you want.
Solved the issue. Its not just the header color, I needed to change the collapsible menu background as well. So I used the same logic I used for header color. Capturing the click function of the collapsible nav bar and toggling the colors. Here is my final piece of code:
<script>
$(function (){
$(".navbar-toggle").click(function() {
if ($(window).width() < 440) {
$(".navbar-collapse").toggleClass("menuActive");
$(".navbar-header").toggleClass("menuActive");
}
});
});
</script>
Roughly like this, on click when res is less than 440 the navbar will be white :-
<script>
$('.navbar').click(function() {
$(this).toggleClass('open');
});
</script>
#media only screen and (max-width: 440px) {
.navbar.open {
background-color: #ffffff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
-moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
}
}
<div class="navbar"></div>
I am working on the table data. I fixed the table header and left column using jQuery. It works fine but When I am scrolling the table the border is flickering. If we apply the background color is white then the border is hidden. How can we stop the flickering the borders while scrolling the table. Please help me. Thanks in advance.
Here my code in JSfiddle https: //jsfiddle.net/j41acpmx/65/
The problem is with the relative position and the border is left behind making to flicker. Two ways to solve this matter.
First way is with CSS and remove table's th border from the beginning and make th background white for better visibility.
https://jsfiddle.net/pfysr0be/
Second way is to subtract the border width when positioning the fixed th elements.
Your current border is 2px so, I subtracted 2px from css top property at line 115. This will push th 2 pixels up.
if(settings.head)
{
this.find("thead tr > *").css("top", parseInt(top)-2);
...
}
Ok, you can also change your CSS to this.
Adding box inset shadows to th to solve with 2 pixels missing when floating.
#parent {
height: 300px;
width: 300px;
}
.table{
border-collapse: collapse;
}
td{
border-top: 2px solid;
background: white;
padding: 5px;
}
th{
background: white;
padding: 5px;
-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1);
}
Jsfiddle link: https://jsfiddle.net/af2quek5/
I'm wanting to do a d3 transition based on style based in the css. However I am not able to do it for the box-shadow. Have I made a mistake or is it not supported?
var first = d3.select('.first'),
second = d3.select('body').append('div').attr('class', 'second').style('display', 'none'),
color = second.style('box-shadow');
first.transition().duration(3000).style('box-shadow', color);
.first {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px gray inset;
}
.second {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px blue inset;
}
Here is the example in fiddle:
http://jsfiddle.net/zasDK/4/
Here is a working example that works with background-color (I based my code on this one):
http://jsfiddle.net/linssen/zasDK/
The problem is that you are getting the canonical form of the box-shadow style when you are retrieving it using D3. This is "rgb(0, 0, 255) 0px 0px 4px 1px inset" in this case, and quite different from how you specified it in your CSS. Now D3 doesn't know how to interpolate between the strings
0px 0px 4px 1px gray inset
and
rgb(0, 0, 255) 0px 0px 4px 1px inset
and nothing happens. It works if you explicitly specify the new style in the same format as the first, see this fiddle.
However, this doesn't really give you the transition you want in this case. One approach to fixing this is to use a different way of declaring the style (see paulitto's answer), but this may not be possible depending on what other styles you're using. The second way of fixing this is to use a custom style tween. In particular, you only need to interpolate the colours here as the rest stays constant. In code, this looks like this.
first.transition().duration(3000)
.styleTween("box-shadow", function() {
var i = d3.interpolate("gray", "blue");
return function(t) {
return "0px 0px 4px 1px " + i(t) + " inset";
};
});
Complete demo here.
If you only want to make transition for shadow color, you can use the fact that it inherits color css property.
Change your css to this:
.first {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px inset;
color: gray;
}
.second {
width: 100px;
height: 100px;
box-shadow: 0px 0px 4px 1px inset;
color: blue;
}
And animate color instead of box-shadow:
first.transition().duration(3000).style('color', color);
See updated fiddle
I'm making a website. When you click on my search box and type you click search and then it takes you to google.com with search results how would i use ajax to display results in a frame as you type?.when u search on http://google.com the text you type brings up results by its self without pressing search how can i do this? Here is my html snippet
<div class='search'>
<form method="get" id='search' action="http://www.google.com/search">
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" />
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." />
</div>
I have alot of css behind it to make the text box enlarge and change color. Here is the snippet just in case it's relevant.
#search input[type="text"] {
background: url(imgs/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
outline: none;
}
#search input[type="text"]:focus {
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 175px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
outline: none;
}
div.search
{
position:fixed;
top:8px;
right:5px;
}
so how would i make an ajax frame that displays google search results as you type?
i know nothing about ajax i dont know how to start a line of code with it ither so please explain in depth
*side note
sorry if website looks bad im 13
Without knowing JavaScript you are pretty well stuck, I recommend learning it first. w3schools.com would be a good place.
Google no longer lets you use their website through an iframe, so I recommend using startpage.com as their results pull from google.com
The simplest way that I can think of to do it is something like this (in this example I use the mobile version of the website as it embeds better.): http://jsfiddle.net/A8M4r/
<!DOCTYPE html>
<html>
<head>
<script>
function querify(query) {
return query.split(" ").join("+") // replaces spaces with +s for url
}
function updateIframe(query) {
query = querify(query);
var i = document.getElementById("searchResults");
var searchEngine = "http://startpage.com/do/m/mobilesearch/?q="
var yourSiteToSearch= "site:example.com+"
i.src = searchEngine + yourSiteToSearch + query;
}
</script>
</head>
<body>
<input oninput="updateIframe(this.value)" type="text">
<iframe id="searchResults" height="100%" width="100%">
</body>
Hope this helps!
P.S. If you would like one where the iframe only pops up when the user clicks on the search box there is one here: jsfiddle.net/4EDUK
$(window).load(function()
{
var opts =
{
url: "http://www.google.com/search?q=" + $("#mysearchInput").val(),
success: function(data)
{
//parse the results which are in variable "data".
//You're going to need to analyze the results yourself
//and parse it yourself, in whatever way you want to
var myresults = "my example results here";
$("#myiframe").append(myresults);
}
}
$.ajax(opts);
});
If you want a custom autocomplete in jQuery you may use one like jQuery Autocomplete where you would have to define the autocomplete values with an array or remote file.
Else Google Custom Search enables you to use autocomplete through a search box with attribute parameters provided by Google. Here is a webpage that would help you with it - http://www.theblog.ca/autocomplete-google-custom-search-input-field