I've tried the style attribute but it doesn't work and causes onclick to not work. Here is the code I used:
<button style="width: 100px; height: 75px;" onclick="window.location.href='https://discord.gg/unDRU8a';"></button>
I think your code does not have any problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>btn-size</title>
</head>
<body>
<button style="width: 100px; height: 75px;" onclick="window.location.href='https://www.google.com/';">alert</button>
</body>
</html>
the url that you entered has problems. I tried "https://www.google.com/" instead of that and it works well.
Related
I'm trying to redirect website visitors to other websites through css onclick redirects.
Is it possible open new window ?
You can use "_blank" this opens the linked document in a new window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%;
margin: 0;
}
.full-height {
height: 100%;
}
</style>
</head>
<body >
<div class="full-height" onclick="window.open('http://www.google.com', '_blank')">
<p>page content</p>
</div>
</body>
</html>
his is the CSS code that I already have in place for fixed-sized buttons. I want to increase the size of the icon inside of these buttons. The style of the button is |text + icon|. Thank you
.nectar-button.fixed-size {
width: 250px;
height: 75px;
font-size: 18px;
line-height: 30px;
}
give another class name on icon tag and give css like:
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
</style>
</head>
<body>
<button class="btn"><i class="fa fa-home"></i> Home</button>
</body>
</html>
try these code, I think your problem will be solved, Thank you.
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
I'm using grunticon to add svg's.
Everything working but I'm struggling to style the svg's with css.
I simple want to chnage the fill color of the svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.icon-heart{
background: red;
}
.icon-heart{
fill: red;
}
</style>
<title>Title of the document</title>
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
<div class="icon-heart" style="height: 50px; width: 50px;"></div>
</body>
</html>
You need to ensure that the svg's you are using do not have the fill="{color}" or style="fill:{color}" hardcoded in them as these will override any css style you apply.
I think you will have to do this by manually updating the svg unless there is a grunt way to do it.
To change the style attributes via css, you need to embed the svg into the dom. Grunticon (above v2.0) offers a easy way to do this.
You need to enable the enhanceSVG option in your gruntfile and then you can use the data-grunticon-embed attribute on your div to embed it.
Look at their documentation for more information
https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new
I am trying to make it so that the features that are on every page of the site are in separated HTML files. I made a header.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<link href="../css/inc/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="identityAndLinksHeader">
<table>
<tr>
<td><a>Home</a></td>
<td><a>About</a></td>
<td><a>Privacy</a></td>
</tr>
</table>
</div>
</body>
</html>
And the following CSS:
#charset "utf-8";
/* CSS Document */
#identityAndLinksHeader
{
height: 50px;
width: 100%;
margin: 0, 0, 0, 0;
padding: 0, 0, 0, 0;
background-color: rgba(127, 140, 141,1.0);
}
The file works fine and looks like this:
http://puu.sh/68SbK.png
Then I have this index.html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object name="header" type="text/html" data="inc/header.html"></object>
</body>
</html>
However when I run this, the header looks like this:
http://puu.sh/68S9M.png
Does anyone know why this happens? Thank you!
The first thing is you don't need to define type = "text/css" in html5
and second the width of your #identityAndLinksHeader is 100% and perhaps in index.html, that small area is the 100%.
The object tag's size is only so large. Try setting its width to the width of the page.