I have this code and idk how to make it so when I click on the items in the "menu" to not redirect to other pages but to change the src of the iframe.. should I change the
Code:
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner <br>
Guardians of The Galaxy <br>
The Guest <br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
I'm still a starter in this domain so I really have no idea how should I modify the code to obtain what I intend to.
You can simply add a target to your menu-items and a name to your iframe, like so:
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
Or did I missunderstand the question?
css is a markup language, so you will not be able to do what you want with css.
However, you can give your iframe an id and change the source using javascript. This SO post explains it perfectly, I could not do a better job :p
If you have jQuery (you should!) then you can do something like this:
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
Since you want to cancel the href in the <a> tags, why not remove them completely and replace them with <div> tags?
You can't modify properties of DOM elements using css. Use js/jQuery:
$(document).ready(function() {
$("#menu a").click(function(e) {
e.preventDefault(); //so browser will not follow link.
$("#content iframe").attr("src", $(this).attr("href"));
});
});
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#menu {
background-color: #eeeeee;
height: 470px;
width: 200px;
float: left;
text-align: center;
padding: 5px;
}
#content {
float: left;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner
<br>
Guardians of The Galaxy
<br>
The Guest
<br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
Its not Css code, its a JS code.
you need to to connect you items to an event listner take the href value on put it on the iframe
//jquery on load mathod//
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
Related
I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>
I got a website which basically is 80% index.html plus a few minor subpages.
Index.html is divided into few sections.
However, the navigation has position:fixed and height of - say - 100px, so links like
<a href="#section">
need a 100px offset.
I achieve it through jQuery (ill leave all ifs for specific sections out):
$("#navigation a").click(function() {
event.preventDefault();
var offset = $("#section1").offset().top - 100;
$(window).scrollTop(offset);
}
The problem is that when i navigate to index.html from subpages, this trick won't work, so i must not use this function on subpages and simply "allow default".
Is there a way to navigate to a #section of an other html document with a proper offset (cant be hard coded)?
You can achieve this without Javascript.
Assumed on the index.html all targets having the class section. With this CSS snippet the fixed navigation does not hide any target.
body {
padding-top: 60px;
margin-top: 0px;
}
#fixed-nav {
position:fixed;
height:50px;
line-height:50px;
vertical-align:middle;
background:#000;
top:0;
left:0;
right:0;
color:#FFF;
padding-left:5px;
}
#fixed-nav a {
color: white;
margin-right: 10px;
text-decoration: none;
}
#sections .section {
height:400px;
padding-left:5px;
}
#sections .section:before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
<div id="fixed-nav">
To target 1
To target 2
To target 3
To target 4
To target 5
</div>
<div id="sections">
<div class="section" id="target-1">
Target 1
</div>
<div class="section" id="target-2">
Target 2
</div>
<div class="section" id="target-3">
Target 3
</div>
<div class="section" id="target-4">
Target 4
</div>
<div class="section" id="target-5">
Target 5
</div>
</div>
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
Hello I really need your help. I have been googling around for how to make a tweet box like twitter's "What's happening" box for user to post new content using bootstrap 3 but so far I cannot find anything close.
Anyone have any idea or keyword that could help? Thank you very much!
You may find a lot of plugins to do the same . But If you want do it your own follow the below steps (this contain only basic functionality)
Define a span or div like below
<div class="container">
<div id="mockTextBox">
What's Happening ?
</div></br>
<textarea id="originalTextBox" class="form-control">
</textarea>
</div>
Hide the textarea at first and show the span/div as textbox.
Then define the events
$(document).ready(function(){
$('#originalTextBox').hide()
$('#mockTextBox').click(function(){
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
Apply CSS accordingly and you got what you want.
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
}
#originalTextBox
{
width:300px;
height:50px;
resize:none;
}
Check this sample http://codepen.io/Midhun052/pen/mVByzK
I have add the bootstrap class to text area in the codepen above for that nice look.
Just updated
A few more CSS and Images
$(document).ready(function() {
$('#originalTextBox').hide()
$('#mockTextBox').click(function() {
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
display:inline-block;
margin-top:10px;
border: 1px solid #337ab7;
}
#txt
{
border:1px solid;
display:inline;
height:20px;
}
#originalTextBox
{
width: 310px;
height: 100px;
resize: none;
border: 1px solid #337ab7;
background-color: #337ab7;
margin: 10px;
}
#originalTextBox textarea
{
resize:none;
margin:5px;
width:300px;
}
.class2
{
float: right;
margin-top: 12px;
margin-right: 2px;
}
.imgF1
{
width:20px;
height:20px;
margin:5px
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<div id="mockTextBox">
<img src="http://lorempixel.com/46/46"/>
<div id="txt">What's Happening ?</div>
<img class="class2" src="http://lorempixel.com/16/16"/>
</div>
<div id="originalTextBox">
<textarea class="form-control">
</textarea>
<img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
</div>
</div>
It's simple jQuery application.
Check this out.
Here's a JSFiddle.
Then all you gotta do is initiate the jQuery.
Such as:
$('textarea').autogrow({onInitialize: true});
Check fiddle for more info.
Cheers!
UPDATED ANSWER:
Use CSS to style your textarea, no need for javascrcipt styling here. Prepare your style in CSS under a specific class and when you need to, you can add your element this class and its propeties. This is much cleaner solution. Use focus and blur events to get textarea element. Here is example.
HTML
<textarea rows="4" cols="50" id="txtArea">
<textarea>
JS
$(document).ready(function() {
$('#txtArea').on("focus", function(event) {
if(!$('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').addClass('customTextAreaClass');
}
});
$('#txtArea').on("blur", function(event) {
if($('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').removeClass('customTextAreaClass');
}
});
});
CSS
.customTextAreaClass{
background-color: #fff;
width: 565px;
color: #000;
height: 120px;
padding-left: 1px;
padding-top: 1px;
font-family: "Tahoma", Geneva, sans-serif;
font-size: 10pt;
border: groove 1px #e5eaf1;
position: inherit;
text-decoration: none;
}
Here is my website.
http://www.gtaresources.net/
The css makes anchor elements have certain css properties and i just want it for like a navigation bar. just the login button and when i add a menu. But for now you can see that green behind the image at the top right. It's not supposed to go behind every anchor i just want it for certain ones and i can't or don't know how to do inline css for only the menu with the a:visited and a:hover and stuff. What's the solution? I just need to make some of the css only work for a certain elements or elements.
I made notes of where the css that is interferring begins and ends.
Here my source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
<img src="/victoria/logo.jpg" width="250" height="75" class="logo">
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center>Click here for help</center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
The clean method to do this would be using CSS classes. In your HTML, add a class to the css elements that should have the green background.
HTML:
my link
CSS:
a.green-on-hover:hover {
background-color : green;
}
Note: The class name, is just like a variable-name can be anything, even 'hyphens' are allowed in the class-name. I gave 'green-on-hover' you can call it anything you want.
Found this very simple tutorial to help you with classes:
http://www.tizag.com/cssT/class.php
Hope that helped. Let me know if you have questions.
One Suggestion: Try to make your question, more generic next time.
You background the anchor with green and you put inside the image on it and you see the result of yours.
try this
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
css:
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}