I have created a little website (which will probably stay offline) to make some things easier. I created a hotbar with links so I can navigate to important sites more easily.
The problem is:
To iframe google into the webpage I had to use a proxy (I used hidemyass) because google blocks the use of iframes, but because the proxy site has a huge banner on top of every page you open trough it I moved the content inside of the iframe using margin top in CSS.
So the banner is still there but you can't see it but now whenever I open any other website in the same iframe without any banners it will hide part of the website and I don't want this.
So how do I make it hide the banner on top of the proxy page and still fully display any other page? I tried to give the div and iframe 2 names so that I could make 2 CSS statements but this doesn't work.
Here's the code:
#frame1 {
position:fixed !important;
position:absolute;
top:0%;
right:0%;
bottom:0%;
left:8%;
overflow: hidden;
}
body {
background-color: black
}
#frame2 {
width: 100%;
height: 131%;
margin-top: -18.5%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="school/bronnen/css/main.css">
<meta charset="UTF-8">
<title>Bronnen</title>
</head>
<body>
<br>
a href="http://2.hidemyass.com/ip-1/encoded/czovL3d3dy5nb29nbGUuY29tLw%3D%3D" target="frame2"><img src="school/bronnen/pics/google.jpg" alt="google" width="7%" height="auto"></a>
<br>
<img src="school/bronnen/pics/github.png" alt="github" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/awwards.png" alt="awwards" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/dropbox.jpg" alt="dropbox" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/activetuts.png" alt="activetuts" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/stackoverflow.jpg" alt="stackoverflow" width="7%" height="auto">
<div name="frame1" id="frame1"><iframe src="school/bronnen/iframe/iframe.html" name="frame2" id="frame2" frameborder="1" scrolling="auto"></iframe></div>
<br>
<img src="school/bronnen/pics/dubstep.jpg" alt="dubstep" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/codecademy.png" width="7%" height="auto" alt="">
<br>
<img src="school/bronnen/pics/youtube.png" alt="youtube" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/facebook.png" alt="facebook" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/piratebay.jpg" alt="piratebay" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/twitter.png" alt="twitter" width="7%" height="auto">
</table>
For obvious security reasons, you can not change contents of an iframe from its parent
Related
Being new to bootstrap and scripting with html/css in general, I am attempting to create a simple html table (one row with three columns). Each column is to be even (taking up one third of the table which it exists inside of. The problem I am encountering is that it appears to be taking up only two-thirds (2/3) of the available space with in the table. I've looked on the internet for solutions, googled, read a several posts/articles on stack and other places, but I've not found a solution and am hoping for help.
You can see a straight html render of the error here
Here is a picture detailing the issue:
As the example image shows the thin red column is taking up one third of the table space (green bordered table), however that table is not expanding to occupy the full space available to it in the red div. I've looked for through the html render and not found a cause for the issue.
<div class="area">
<section class="wrapper scrollable">
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="blank">
<div class="blank-page">
<h1>Session is active</h1>
<table class=" " style="border: 1px solid red;">
<tbody>
<tr scope="row" style="border: 1px solid red;">
<td class="text-center" style="border: 1px solid green;">
<div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
<div class="card_user-charProfile">
<img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">
<div class="card">
<div class="card">
<p> content goes here</p></div>
</div>
</div> <!-- end row -->
</div><!-- end CHARACTER PROFILE OUTER DIV -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
Here are the CSS declarations / links
<script language="JavaScript" type="text/javascript">
<!-- This JS disallows hijacking into someone else's frame...
if (top.location != self.location){top.location=self.location}
//-->
</script>
<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">
<!-- font CSS -->
<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<!-- __themes/_fonts/font-glyphicons.css -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script>
$(function () {
$("#supported").text("Supported/allowed: " + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$("#toggle").click(function () {
screenfull.toggle($("#container")[0]);
});
});
</script>
Why are you using the table? You can handle that all with the bootstrap grid system. Avoid using table in your project. But I will suggest you to give it a width:
td{width:100% !important;}
Try doing this it may help you.
I am new to bootstrap coding and CSS I am stuck in one issue where in the desktop version i need one image but when it comes to the mobile version i need the second image to be shown and first image should hide.
<div class="col-md-9" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
Help needed.
Please implement this code.
You can change max width in media query according to your need. Also please expand snippet to check hide and show image according to device.
I hope it will work for you.
<style>
.image_section img{
display: block;
}
#media (max-width:640px){
.image_section img:first-child{
display:none;
}
}
</style>
<div class="col-md-9 image_section" style="padding: 0px;">
<img src="images/Trinity-Garden-landing-Page-1.jpg" />
<img src="images/Trinity-Garden-landing-Page-4.jpg" />
</div>
Use the below code, It might help you..
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="Masters_baby.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
#media(max-width:767px){
.image1 {
display: block!important;
}
.image2 {
display: none !important;
}
}
</style>
</head>
<body>
<div class="row">
<img src="img/kiran.png" alt="img1" style="height: 200px;width: 200px;display:none;" class="image1">
<img src="img/kiran2.png" alt="img1" style="height: 200px;width: 200px;display: block;" class="image2">
</div>
</body>
</html>
In that I used #media query to hide first image and display second image on mobile view.
You can use bootstrap responsive utilities for showing/hiding components based on the screen size.
Your code snippet has been modified as an example.
The first image will be visible in medium sized screens only
The second image will be hidden on medium sized screens
<div class="col-md-9" style="padding:0px;">
<img class="visible-md-block" src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
UPDATED :
Try these classes :
http://getbootstrap.com/css/#responsive-utilities-classes
for the image that must only show in the desktop use :
hidden-xs hidden-sm hidden-md
for image that must show only on mobile use :
hidden-lg hidden-xl
example :
<div class="col-md-9" style="padding:0px;">
<img class=" hidden-lg hidden-xl " src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
<img class="hidden-xs hidden-sm hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>
You may want to have a look at the picture element. Support is quite good now.
Example:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
I am trying to implement add this code to a site , I would like to open facebook,twitter,linkedin and email windows as pop up when any one click on the buttons . I am also using cutomized buttons here . All other except linked in works perfect , but linked is not opening in a pop up window instead it opens a seperate tab window. How can I solve this ? Please see the code here
<html>
<head></head>
<body>
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/30 /addthis_widget.js#pubid=sunilkumarpkerala"></script>
<!-- AddThis Smart Layers END -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook"><img src="http://mysite.com/workshop/shareimages/facebook.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_twitter"><img src="http://mysite.com/workshop/shareimages/twitter.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_linkedin"><img src="http://mysite.com/workshop/shareimages/linkedin.png"
width="32" height="32" border="0" alt="Linkedin" /></a>
<a class="addthis_button_email"><img src="http://mysite.com/workshop/shareimages/email.png"
width="32" height="32" border="0" alt="Email" /></a>
</div>
</body>
</html>
You can see the live example here
You can check Addthis Sharing Endpoints that doesn't uses their script and make it work how you want.
Using JqueryMobile, I wish to achieve the following layout:
Having nice decorations boxes to separate my input lines
Having one checkbox aligned vertically with an input text field, both on the same line
But after many attempts, the only layout I could come from with is the following:
The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body style="font-size: 12px;">
<div data-role="page" id="one">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 20%;" >
<div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
<div class="ui-checkbox">
<label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
</span>
</label>
</div>
</div>
</div>
<div class="ui-block-b" style="width: 80%;" >
<div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
</div>
</div>
<div style="height: 200px;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" />
<label for="checkbox-mini-0" > </label>
<input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
</fieldset>
<div style="height: 30px; border:1px solid lightgray;">
</div>
<div style="height: 30px; border:1px solid lightgray;">
</div>
</div>
</div>
</div>
</body>
</html>
Any help or comments to achieve my goal would be appreciated ?
Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/
http://jsfiddle.net/XAsyy/110/
Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow:
data-role="none" ie. <textarea id="test" data-role="none"></textarea>
http://jsfiddle.net/XAsyy/144/
or, use:
css resize: none;
http://jsfiddle.net/nirmaljpatel/XAsyy/
I'm having trouble with placing divs next to each other rather than having them below. I'm new to using CSS and I'm not sure what I need to do exactly.
The webpage is www.panduzee.com/wordpress
The post "Richard Lu" is suppose to be next to "Ashley Lee."
The link to the code is: http://pastebin.com/J3CNMfaP
And the CSS is: http://pastebin.com/isn5NViA
Sorry, I tried getting the code to work within this post but it wasn't showing up correctly.
Any help would be appreciated! The CSS was from the wordpress theme, just letting you all know.
Thank you!
jsFiddle( http://jsfiddle.net/BnJ7g/3/ )
on your "boxes" and "boxes2" divs, add the float:left attribute.
<div id="boxes" style="float:left;">
<div class="box">
<!--The post title-->
Ashley Lee <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
<div id="boxes2" style="float:left;">
<div class="box">
Richard Lu <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>