I'm in the process of creating a website (a beginner obviously) and for some reason, on one of my pages, the footer section is MUCH longer than it is supposed to be. Its werid because on other pages, it looks fine. I used the exact same code on a new page and the footer is all out of whack. Here's what I get when I inspect the element on Chrome:
<div id="skel-layers-inactiveWrapper" style="height: 100%;">
I can't find anything regarding inactive Wrappers or anything of the sorts in any of my css files either. Thanks for the help.
Make sure you have you a doctype defined
<!DOCTYPE HTML>
Solved the issue for me.
*I know I'm a bit late on this
try to hide the element <div id="skel-layers-inactiveWrapper">
The CSS
#skel-layers-inactiveWrapper{
display:none!important;
}
Try changing the "100%" to a smaller value, or post more code so we have more to work with :)
Height of 100% refers to the height of the container. The chances are that the instances that work have a surrounding DIV which this one does not and so it is probably taking the height of the entire body (or much larger div) and doubling it.
Here is the entire code in context. The only tags it is embedded within are and tags.
<footer id="footer">
<!-- Contact -->
<h2 class="major"><span> Get in touch</span></h2>
<center><ul class="contact">
<li><a class="icon fa-facebook" href="#"><span class="label">Facebook</span></a></li>
<li><a class="icon fa-twitter" href="#"><span class="label">Twitter</span></a></li>
<li><a class="icon fa-google-plus" href="#"><span class="label">Google+</span></a></li>
</ul></center>
<!-- Copyright -->
<div id="copyright">
<ul class="menu">
<li>© Govpal. All rights reserved 2014</li>
</ul>
</div>
</footer>
Related
Thank you for taking a look at my question, I have developed a WordPress theme and added live customization to the logo using PHP (Although I think this is a HTML/CSS problem)
Here is what the logo looks like:
On top of the gavel there are some words which is creating that white banneer.
Here's the HTML That handles the logo:
<header class="main_menu">
<div class="container nav_wrapper">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/">
<?php
// Display the Custom Logo
the_custom_logo();
if(!has_custom_logo()){
echo '<img alt="" src="http://placehold.it/350x90" class="img-responsive">';
}
?>
</a>
The the_custom_logo(); function prints out the image tag.
Any ideas on how I can go about fixing this? I would REALLY appreciate it.
Your question states that on top of the gavel it has words but you don't specify what the words are.
It is worth checking all your code especially in your functions the_custom_logo and hascustomlogo (not printed) for any odd echo or print statements or check your HTML for odd characters. Sometimes echos can be used for locating or printing errors but they maybe triggered erroneously which could be causing the problem with your code.
It might help to view the source in your browser as that will tell you at which point the text is appearing in your code to help you narrow down your search.
Hope this helps
I've been trying to learn most of this as I go so as with previous questions I've posed some of this may seem simplistic or blatantly over my head - with that said I learn best through peer explanation/example/advice so thanks in advance.
I have used what I've learned here so far to build the basic structure of my personal website. The concept is an right aligned accordion menu that remains from page to page while the content and backgrounds in the area to the left will change based on the menu selection - fundamentally like frames or iframes used to look.
THE PROBLEM:
I have some js knowledge and I know that I can cycle some of the content out via getElementById but as these will be in a gallery I didn't want to drag my speed down by loading 54+ images in the background. I also know that I can just make the thumbnails in the sidebar link with php and just load the page entirely but as I don't want the menu to change I've been trying to figure out the best method to go about this. So far I've heard mention of PHP, JQuery and AJAX (which I know by name but is new to me). Below is an example of the code and what I want to do:
<body>
<div id="all">
<div id="live-area">
<?php include("blog.php") ?>
</div>
<div id="side-bar-area">
<div id="sidebar-header">
<h3>Title</h3>
<h1>Title</h1>
</div>
<div id="nestedAccordion">
<h2>Portfolio</h2>
<div>
<h3>Branding</h3>
<div>
<ul>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
<img src="images/thumbs/example5.jpg"/>
<img src="images/thumbs/example6.jpg"/>
<img src="images/thumbs/example7.jpg"/>
<img src="images/thumbs/example8.jpg"/>
<img src="images/thumbs/example9.jpg"/>
</li>
</ul>
</div>
<h2>Blog</h2>
<div>
<ul style="margin:0px;">
<li>entry 1</li>
<li>entry 2</li>
</ul>
</div>
<h2>About</h2>
<div>
<ul style="margin:0px;">
<li>About</li>
<li>Resume</li>
<li>Accolades</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Based on the above, what I want is that whenever any of the items in the menu such as <img src="images/thumbs/example1.jpg"/> are selected it will change the content of <?php include("blog.php") ?> without reloading the page.
Firstly, is this doable? And secondly, does anyone have advice for a novice in terms of this - either basic tutorials or a how-to for the layman?
As you added jquery to your tags, you could use AJAX to perform a server side request and load the new content and replace the existing one.
$.ajax({
url: 'http://example.org/other-page.php',
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#live-area').html(data);
});
Try this,
In html,
<div id="live-area">
<?php include("blog.php") ?>
</div>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
</li>
In script,
<script>
$('.thumbs a').click(function(){
var page = $( this ).attr('data-page');
$.ajax({
type:'POST',
url:page,
success: function(response){
$('#live-area').html(response);
}
});
})
</script>
This question is pretty specific, but I'll ask anyways.
First off, I know iframe's are probably not the best design but I don't know how else to solve my problem. Anyways, let me start of with some background information:
I have a page with some WebGL content on it (it just loads a .obj and .mtl model using Three.js, and adds some keyboard navigation for camera movement).
This page is structured so that it gets a variable using php's $_GET array, and then loads the model based on that variable (if the variable was "Bus" then it would load from obj/Bus/Bus.obj, and if the variable was "Shoe" then it would load from obj/Shoe/Shoe.obj).
The link to the page would be like "browser.php?name=Bus" or "browser.php?name=Shoe".
Now, I want to display several of these pages in a carousel of iframes. Because I am using Bootstrap, this task is trivial with the following code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<iframe src="browser.php?name=Bus" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
<div class="item">
<iframe src="browser.php?name=Shoe" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
This works perfectly except for one issue, the carousel-caption and all of its content are not showing. I am not sure if this is because of the iframe, or of the WebGL content, because when I just had an image there, its content was showing.
WebGL Iframe Carousel:
Normal Image Carousel:
Finally, my question: How do I fix my code / organization / design so that I can display the WebGL content in a carousel?
Sorry if this is a duplicate, but I was unable to find any relating links on google.
Thanks for taking your time to read/possibly answer this question,
Bucco
[EDIT]:
I just realized that my question was horribly worded, and was not clear enough. My main issue is with the navigator arrows not showing up in the WebGL content carousel (see the images). How do I fix my design / code so that I can display the WebGL content in a carousel with the navigator arrows?
The only obvious thing I see is that the <iframe>s are missing their closing tags, which are actually required according to the W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags).
I assume the normal behavior of an <iframe> is kicking in, which means that any children of the <iframe> are only displayed if the src cannot be loaded. Or, stated another way: lacking the closing tag, it looks like your navigation elements are treated as "fallback" content rather than sibling elements.
In fact, loading your content into a jsFiddle seems to prove me out: http://jsfiddle.net/dRtvH/ - w/o closing tags, no carousel, but simply closing the <iframe>s makes the nav buttons show up.
Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?