I have a webpage which is the main index.html and another projects_imgs.html which will be the iframe src inside the index.html
Inside the projects_imgs.html there will be images. What I want to do is,
In index.html I want to add <a> tags that links to the images inside projects_imgs.html, so whenever the user clicks these links the iframe loads the clicked link that targets a specific image
get the idea?
So far here is the code of index.html:
<!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p>Images</p>
</div>
</div>
and projects_imgs.html:
<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}
img {
position: fixed;
width: 100%;
height: 100%;
}
</style>
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>
</body>
</html>
To implement such a logic in html only is not possible i think.
I suggest you to use PHP to implement this logic. Here is a small example:
index.html
<html>
<body>
Images: <br>
Image 1 <br>
Image 2
</body>
</html>
These links call images.html with the parameter "image". As you can see, we set "image" to 1 or 2, depends on what the user is clicking on.
images.html
<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>
In images.html you decide with an IF Statement. If it was 1, then you just call the with the Image 1. If 2....
You can use that to implement it with your iFrame. But keep in mind that you need a webserver who understands PHP to get this running!
Have a nice day!
I actually figured it out!
I do it like this:
function setURL(url){
document.getElementById('iframe').src = url;
}
<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
A01-FAF-1<br>
A01-FAF-2<br>
A01-FAF-3<br>
A01-FAF-4<br>
A01-FAF-5<br>
A01-FAF-6<br>
Just replace the images with some random google images link to test it.
Related
I don't post here often at all but only when I am stumped and I fos sure am.
I have a div tag with inside an article tag and the div tag wont extend the background held by the article tag.
The code I have is split into many different files to use jsfiddle so I'll post it here and provide screen shots of what is happening. If you guys can figure it out an explanation would be greatly appreciated.
This is a screen shot of whats happening, I want the twitter to be above the twitter widget, but it overflows under the facebook rather then extending the article background down.
This is the CSS: https://pastebin.com/y1MPG6rV
It is to many characters to paste here.
Image of whats happening on my end: https://imgur.com/a/GuUs1m4
This is the HTML:
<!-- Wrapper -->
<div id="wrapper">
<!-- About -->
<article id="about">
<h2 class="major">About.</h2>
<span class="image main"><img src="images/fbcover.jpg" alt="" /></span>
<div class="medias"><center>
<div>
<span>Facebook</span>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDelusionsEntertainment%2F&tabs&width=340&height=180&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="180"
style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="cust">
<span>Twitter</span>
<a class="twitter-timeline" data-width="305" data-height="356" data-theme="light" href="https://twitter.com/DelusionsENT?ref_src=twsrc%5Etfw">Tweets by DelusionsENT</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</center></div>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">Delusions Entertainment™</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
Instead of fixed height you can use this:
.medias { height:auto }
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
I have implemented the blueimp carousel (2.22.0) on a gallery page. It works fine and is displaying the images in the carousel. But it is also showing all the images below the carousel in a quasi light box style. This is my code.
<link href="~/Content/Css/blueimp-gallery.min.css" rel="stylesheet" />
<div class="page-header">
<h2>#Model.Name</h2>
</div>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
#foreach (GalleryViewItemVM item in Model.Images)
{
<a href="#item.ImagePath" title="">
<img src="#item.ThumbPath" alt="">
</a>
}
</div>
<script src="~/Scripts/blueimp-gallery.min.js"></script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
For completeness I am using razor and bootstrap 3 although I don't think this relevant.
The <img> tag within the <a> tag is unneccesary and is causing the unwanted behavior.
I wrote the following code for a page in HTML, CSS, and JavaScript. How do I transform this into a WordPress Page Template?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/global.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.js"></script>
<body>
<div class="box1">
<div class="top1"></div>
<!-- Content Start Here -->
<div id="m-container">
<h1>Featured Clients & Partners</h1>
<ul class="filterClients" style="float:left; clear:both; margin:0 0 0 0px; ">
<li>IT</li>
</ul>
</div>
<!-- Content Start Here -->
</div>
</body>
</html>
For creating Wp template check below code & save your template file name inside theme directory.
<?php
/* Template Name: Custom Template */
get_header();
?>
<div class="box1">
<div class="top1"></div>
<!-- Content Start Here -->
<div id="m-container">
<h1>Featured Clients & Partners</h1>
<ul class="filterClients" style="float:left; clear:both; margin:0 0 0 0px; ">
<li>IT</li>
</ul>
</div>
<!-- Content Start Here -->
</div>
<?php get_footer(); ?>
Create a new .php file in your WordPress theme folder, add the following code on the first line:
<?php
//* Template Name: Example */
?>
Followed by your own code.
Return to the WordPress admin area, create a new page and assign the template via the Template dropdown.
You can then amend your template file to pull in the usual WordPress fields, title, content etc.
i am using this code for playing music for my website way2enjoy.com .it playes all songs nicely whose source is in english language but when the source file is in other language say for example arabic it wont play. i have checked the source code using firebug it was 100% corrrect for one flash player and in other flash player it was showing arabic character as ??????????
here is my existing source code .you can see the third div which is arabic. first two will play nicely in the below link but third will not play however everything is just right.
live example http://way2enjoy.com/try/musictest/drplayer/index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" href="drplayer.css" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="drplayer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#playlist").playlist(
{
playerurl: "swf/drplayer.swf"
}
);
});
</script>
</head>
<body>
<div id="playlist">
<div href="29.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b></b> - Shut up and let me </div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="30.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Metallica</b> - Nothing else matters</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="ارجعلي.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Arabic song</b> - Arabic song</div>
</div>
<div class="player inactive"></div>
</div>
</div>
Prev
Next
Pause
Play
here is link for other player i tried
http://way2enjoy.com/music/viewstory/3406
ارجعلي.mp3 is not a valid URL, that may well be your problem. If that is true, you will have to URL encode it or use a latin-only URL.
Here is an on-line URL encoder:
http://meyerweb.com/eric/tools/dencoder/
it turns the file name into
%D8%A7%D8%B1%D8%AC%D8%B9%D9%84%D9%8A.mp3
which should be displayed okay in most browsers (ie. as ارجعلي.mp3), and always work.