Overlay of objects is wrong in chrome, but works in firefox - javascript

I have a question about a project i'm working on.
The website is www.AC-photography.net
When opened in Firefox, the "start scrolling" can be clicked on but when opened in chrome it seems that there is something in front of this layer. Can someone assist on how to make this work in chrome. I will post the html concerning
<div id="main">
<header id="top">
<div class="color_bar"></div>
</header>
<div class="title">
<div class="logo">
<img src="images/logo.png" alt="" />
<!-- <p class="intro_text"> Alex Cherkasov | Art Director </p>-->
<p class="sub_intro">Start Scrolling</p>
</div>
</div>

The direct problem seems to be z-index: auto on your .title class - set this higher than 800, and it should be fine in Chrome.
That aside, you could also do with cleaning up syntax - a paragraph inside an anchor (block level inside inline), with the second not actually defined as block, is asking for trouble!

It looks like it's missing a closing </div> tag. That might be the problem.

Related

CSS isn't working in any browser unless I use inline styles [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have this problem with any div id or when trying to select an element within a class (CSS example: .className li{} ), so I can only assume that I’m doing something wrong. The inline styles work, but if I try to add them to my stylesheet, they won’t show up.
I can see the CSS styles in mobile view, but it’s not working in any browser on my computer.
I’m pretty sure my CSS files are linked properly because the navigation menu is working fine… However, my .js file isn’t working for the page content or the footer. Basically, the header is the only thing that is fully functional and styled.
Example:
Trying to change the background color of the footer:
HTML:
<div id=“footer”>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>TEXT HERE</p>
</div>
</div>
</div>
</div>
CSS:
#footer {
background-color: black;
}
If I do this in HTML it will work:
<div id="footer" style="background-color: black;">
You're using ““ formatted quotes which is wrong. Please use double quotes "" around ID like this
<div id="footer">
#footer {
background-color: black;
}
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>TEXT HERE</p>
</div>
</div>
</div>
</div>
Not sure what your development environment looks like, but if you're working on a live site, you might want to double check that your browser caching isn't loading a non-updated version of the CSS to the browser - Either through htaccess or through your hosting accounts admin area (cPanel, etc).
The obvious quick check for this is to clear your browser cache and see if the updates you've made are rendering.
Since you say that it is only the footer section of the page that you are having a problem with and if your actual code is what you've shown here, then the issue is likely that you are using formatted (smart) quotes around the id="footer" instead of unformatted (straight) quotes:
<div id=“footer”>
Also, make sure that you have saved your file with a standard character encoding (UTF-8 is most common) and add the following tag to your head section to declare that encoding to the user agent:
<meta charset="utf-8">
You can read up on character encoding here.

What's the correct way to add a link to a DfP HTML5 banner?

I'm new to Doubleclick for Publishers and wanted to add an HTML5 banner through the service to our website.
After spending days playing with it, I'm now finally able to upload HTML5 banners. The problem is, these don't have any clickTag on them so I had to do it manually.
Adding the tag per se is, of course, trivial (at least, I hope). Now, if I add a target URL, the way it's done on Google's demonstrative example ...
<body>
<div class="container_dc">
<a href="javascript:window.open(window.clickTag)">
<img id="cta_dc">
</a>
<img class="logo_dc"/>
</div>
</body>
... the banner is un-clickable.
Googling, on the other hand, helped me find this 'solution' ...
<body>
<div class="container_dc" onclick="window.open(window.clickTag)">
<img id="cta_dc">
<img class="logo_dc"/>
</div>
</body>
... which makes more sense. Sure, now the whole banner is clickable (instead of just the CTA button), but that's not only not a problem, but a much better configuration.
My question is: what method should I use? If I opt of the second one, will DfP be able to 'count' those clicks into the stats?
In fact the truth is in between:
<body>
<div class="container_dc">
<a href="#" onclick="javascript:window.open(window.clickTag)">
<img id="cta_dc">
</a>
<img class="logo_dc"/>
</div>
</body>

Images loading with wrong width angular

<div class="list" ng-controller="ListController">
<div class="list-item list-item-flex" ng-repeat="collaborator in collaboratorList">
<div class="list-left list-left-flex">
<img ng-src="images/{{collaborator.imgUrl}}" width="190px" height="190px"/>
<div class="padded-text">
<h1 class="collab">{{collaborator.name}}</h1>
<p>{{collaborator.info}}</p>
</div>
</div>
<div class="list-right list-right-flex">
<a class="mail" href="mailto:{{collaborator.email}}"> {{collaborator.email}}</a>
</div>
</div>
This is my template for previewing collaborators with their images and info. Every time I close the browser and start it again, upon loading this template the height is normal, but the width of the images is 50.466px even though I've set the width both inline and in CSS. If I resize the window or refresh it they go back to the desired width of 190px. It would be great if someone can help me figure out why this happens.
Edit: This does not seem to happen in Firefox, it does in chrome and IE.
Edit2: I have finally found the solution. My it was a flex-box issue, I have made the image align to the left and the text to the right and all works fine now.

Remove style attribute from all descendants in jquery

I'm brand new to javascript/jquery, but have been going okay so far (though you'd hate to see my code), but I've hit a wall with trying to strip out style tags from some HTML I'm trying to clone.
The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;">
<div class="index">
Participate
</div>
<div class="index" style="margin-right: 80px;">
News
</div>
<div class="index active" style="margin-left: 80px;">
<a class="active" href="/about/">About</a>
</div>
<div class="external">
Collection
</div>
<div class="index">
Contact
</div>
</nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html();
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
' + originalNavItems + '
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?
You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever
el.find('[style]').removeAttr('style');
You can use
var originalNavItems = $('#mainNavigation').clone().find("*").removeAttr("style");
Then you can use .append() to add that html elements
Fiddle
You can clone into an imaginary div and then fetch the mainNavigation also. You can also remove the style attributes along with that. Hope this works for you...
var temp = $('<div />').html($('#mainNavigation').clone());
temp.find('*').removeAttr('style');
originalNavItems = temp.html();
The nav is cloned but the html() function only returns the HTML for the contents and that's why it disappears. You can avoid some string manipulation by adding the cloned element directly before a target element.
$("#site").prepend('
<div id="ScrollNavWrapper">
<div class="nav-wrapper show-on-scroll" id="mainNavWrapper">
<nav id="newScrolledNav" style="white-space: normal; display: block;">
<div class="index home">
Home
</div>
<div class="newItem">
<a href="http://www.externalsite.com">
View on External Site
</a>
</div>
</nav>
</div>
</div>');
$('#mainNavigation').clone()
.find('[style]').removeAttr('style').end()
.insertBefore('#newScrolledNav .newItem');
In the previous case find('[style]') matches elements that have a style attribute.
I'm new to Stack Overflow (and js in general), so this might be really bad ettiquette, but I seem to have accidentally fixed it myself trying to debug my implementation of the first upvoted answer that #Anoop Joshi gave above. Please comment and let me know if it would have been better to just edit my question!
I decided to break the process down into separate steps – similar to #Kiran Reddy's response actually, but I hadn't got to trying his yet.
I tried:
var styledHTML = $('#mainNavigation').clone();
styledHTML.find("div[style]").removeAttr('style');
var originalNavItems = styledHTML.html();
$("#site").prepend('<div… etc.
with a console.log(styledHTML) etc under each line to check what I had at each stage – and it worked! (The code did, console.log didn't?)
I was just doing this to try and log the value of the variables at each stage, but whatever I did fixed it…
Now I need to figure out why I can't even make console.log(variable); work :-/
Try this code
$('#mainNavigation').children().removeAttr('style');
Hope this will help you.

windows.print results in empty page

So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.

Categories