As the title says, there's a portion of white space on my website when changing pages. The index page has no issues, but when going to "Work" or "Contact" page, a white empty space appears.
To demonstrate, please head over to my website. Then resize your browser, till the responsive breakpoint (or just use your phone), then using the menu, change to either the "Work" page, or "Contact" page.
I would have solved this issue by now, but the problem persists because I could not debug, use console, or diagnose in any way where the issue arises from.
If you do, please state how you diagnosed it.
Thank you in advance.
Edit #1: After a comment pointed out that it could be a JS issue, I looked into my JS code and the only thing I can come up with is that the following lines of code causes the issue:
$(document).ready(function() {
function setHeightLContainer() {
windowHeight = $(window).innerHeight();
$('#lContainer').css('min-height', windowHeight);
};
setHeightLContainer();
$(window).resize(function() {
setHeightLContainer();
});
});
However, after removing the following code (and anything alike), the issue still persisted.
Edit #2: The following is the HTML and JS for Work page.
JS:
$(".navSide").on("click",".workButton",(function(){
if (!$(".workButton").hasClass("active")) {
$(this).addClass("active").siblings().removeClass("active");
$("#desTitle").load("work.html #desTitle", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}});
$("#rContent").animate({width:'toggle'},400, function() {$("#rContent").load("work.html #rContent > *", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}})});
$("#rContent").animate({width:'toggle'},4500);
$("#lContent").fadeOut(400,function(){
$("#lContent").load("work.html #lContent > *", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}});
});
$("#lContent").fadeIn(4500, function(){});
}
}));
HTML:
<body>
<div id="lContainer">
<div id="lContent">
<h1 class="infoHead infoPos" id="lContentWorkHeader">Work</h1>
<p class="lead shortDes infoPos">Please feel free to take a look at the work I have done so far</p>
<p class="shortDes infoPos" id="lContentWork">The content on the white portion will always be updated when I've had the opportunity to do more projects. I'm always welcoming new projects as I have no doubt in my abilities.</p>
</div>
</div>
(Fix) Edit #3: A comment from Andy pointed out that the issue might be from a CSS styling. An ID with the margin-top:30% caused half of the white screen, and I now have a lead on how to find the rest.
I apologize for my initial post being incomplete, I just had no diagnostics to present.
Got it at last.
Could not let this one go.
The white bar at the top when below 767px was actually part of the lContent which size is 100% of content, the Lcontainer seems to be displaying over the top.
The Lcontainer did not have display set, I changed it via Google Chrome attributes to display: inline-block;
No more White Space :)
Change your code to the following to test :
<div id="lContainer" style="min-height: 993px;/* position: fixed; */display: inline-block;">
Google Chrome to the rescue being able to identify and play with elements whilst seeing results, really does make it an excellent tool.
There are other options you can try but this seems to work ok for me try it out.
Related
How can I create a link that doesn't show its information at the bottom left or right (this depends on the link's position) when you hovering a hyperlink?
Lets say that we have a link like this:
Users
and we want to hide its information or more precisely its hyperlink information that's displayed at the bottom left corner of the browser, like the example on the image below:
Now, I know this is possible because Stack Exchange network sites itself uses this for the "Welcome Banner" displayed on the front page for the very first time you visit each site.
If you hover any of the links:
Anybody can ask a question
Anybody can answer
The best answers are voted up and rise to the top
You'll see that no hyperlink information is displayed. Check out image below to see "Welcome Banner"
It cannot be done with pure html and css. You would have to use javascript for this. Showing the link of an anchor tag is just how most browsers work. Also the user expects to be able to see where he will be redirected.
But it can be done: you can avoid using an anchor tag. Then have another attribute hold the href - like "data-href". Then bind a click event on the a tag that redirects based on this attribute.
I would however, not do this - as I am uncertain if crawlers would see the link.
This is how it can be done, but note that snippets cannot redirect outside SO :)
var aTags = document.querySelectorAll('span[data-href]');
for(var i = 0; i < aTags.length; i++){
var aTag = aTags[i];
aTag.addEventListener('click', function(e){
var ele = e.target;
window.location.replace(ele.getAttribute('data-href'));
});
}
span[data-href]{
cursor:pointer;
}
<span data-href="http://www.google.com">test</span>
After digging even more deeper, I've found a more simpler and easier solution for it on this w3schools article and also with the help of this question in SO I could manage it to open on a new window:
<button id="anchorID" >Go to page</button>
$("#anchorID").click(function() {
window.open(
'http://www.w3schools.com',
'_blank' // <- This makes it open in a new window.
);
});
Jsfiddle live example: http://jsfiddle.net/6sLzghhm/
Remove the href="whatever" from the link and open link by calling a function. This completely removes the link preview on the bottom left of the page.
HTML-
<a (click)="openUrl('https://google.com')">
JS-
openUrl(url: string): void {
window.open(url, '_blank');
}
The stackoverflows Anybody can ask a question-Link is not a hyperlink. Its a HTML Element (in this case a li-Element):
<li id="q">Anybody can ask a question
</li>
with the CSS cursor: pointer; and a click-Eventlistener.
The easiest answer is just use-
<p onclick="window.open('Your Link')">Blah Blah Blah</p>
Easy!
You can also open more links at a time-
HTML:
<p onclick="OpenTwoLinks()">Google And StackOverFlow</p>
Javascript:
function OpenTwoLinks() {
window.open('https://google.com');
window.open('https://stackoverflow.com');
}
I'm working on a website to display some details from another website. Specifically I have an element I wish to display. I can get the elements xpath or css path, and I'd like to use this to display the value of the element in HTML box on a unrelated website.
I'm rather new to this so my question is really this basic, I'm sure it's been asked before but I just don't know what search terms to use. I've looked up what I can but I'm unsure if what I have found can be used in a HTML box (I've tried and failed, but I'm unsure if that's an error on my part or the application of the wrong method).
XPath: //*[#id="box2-server-status"]/div[3]/div[1]/div[1]/img
CSS Path:
#box2-server-status > div.box2-content > div:nth-child(4) > div.server-status-indicator > img
Any help/link with guides welcome!
Take a look at this, if that is what can be of help to you..
I got this page..
https://mkdizajn.github.io/my-colors/
and I'm about to pull the title from this page:
http://mkdizajn.github.io/about/
If you open inspector on that page and enter this code in 'console' (of if I got time and add it there in the source ;)
var content;
jQuery.ajax({
url: 'https://mkdizajn.github.io/about/',
success: function(data){
content = data;
var body = jQuery( content ) ;
alert( body.find('h1').text() ) ;
}
})
you will have to get content from second page in the form of alert.. .. take a note that page is from that same domain, that is very important
https://mkdizajn.github.io/my-colors/
hth, k
I'm having problem on the page I'm working with, I'm trying to set a permalink with an id so that if the page is fully loaded, it would show the page and it focuses on the element with the ID as its top of the page. But the scenario here, after the focus goes to the ID, eventually the view goes to the top of the page.
The page view should go to the heading that says "Care facilities with rest home and hospital level care"
http://metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility
What could a quick fix. Not familiar with the issue.
Any help would be greatly appreciated.
Like Evan Knowles said you need to add names to your anchors for the browser to be able to browse there.
Replace
<a id="trigger-sa" href="http://metlifecare.staging.wpengine.com/living-at- metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
with
<a id="trigger-sa" name="care-facility" href="http://metlifecare.staging.wpengine.com/living-at-metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
I see what you are referring to as the 'jump to the top'. It looks like this piece of code make the entire page block and then jumps to the top
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
</script>
Removing that code stop the jump and makes the #care-facility work correctly.
I have never worked with html2canvas, so I can't comment on what it is doing.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?