On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}
Related
I need help. I am just a beginner in writing web pages, so I hope my question isnt silly. The problem is, that my page doesnt load on a first attempt on a mobile device. (On desktop PC it works normally). I will give you a little background, what steps I made before this problem happened.
I have created websites with lightbox script loading at the start of the page. (I have adjusted the script to work in lower resolutions on mobile phones first) It made it work not properly, when it was opened on a mobile device. The windows were not fitting well on the screen etc..
I have solved this by putting the script at the end of html body. The lightbox works well now, but the page with the gallery doesnt open on a first attempt. I have to refresh the page and then the page appears normally and works without problems.
I have been searching for possible solution to this problem through the whole web, but with no success.
I am attaching my code (I have avoided some metatags, paragraphs with text, navigating toolbar etc. to shorten it and make it easier for you to read it and decode the problem.
I will be glad for any help I can get. :) Thanks a lot. Please, let me know on my e-mail, when answered or a problem with my question.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>...</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="canonical" href="http://www.merryberry.eu/galerie.html">
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="stylesheetmobil.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div class="Body">
<div class="header">
<div class="menu">
<nav id="primary_nav_wrap"> </nav>
</div>
</div>
<div class="picture">
<img src="Images/barvenidekorace.jpg" style="width: 100%; height: auto;">
</div>
<div class="text"></div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>
I called WOW.js and Animate.js in a document:
<head>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width">
<title> Portfolio </title>
<!-- angularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<!-- JQuery -->
<script src="JS/jQuery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Font Awesome CDN -->
<script src="https://use.fontawesome.com/e42f2bbc33.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="JS/wow.min.js"></script>
<link rel="stylesheet" href="animate/animate.min.css">
<!-- Raleway font -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
But when I actually use WOW.js, it doesnt work at all and instead leaves elements blank all together. I know that these files and the syntax is correct because when I tried in a seperate HTML document within the same directory (same indexes), it worked:
<head>
<script src="JS/wow.min.js"></script>
<link rel="stylesheet" href="animate/animate.min.css">
<script>
new WOW().init();
</script>
</head>
<body>
<div id="block" style="height: 800px; background-color: green">
helo
</div>
<h1 class="wow fadeInUp"> Hello </h1>
</body>
And when I add the things from the other document such as bootstrap and jQuery, it stops working. My question is: why does it not work when more links are added and how do I fix it. I don't think a JSFiddle or live link is necessary as the problem is only in the head and I followed the rest of the syntax to the tea. But, if you really need it:
This is the working use of the plugin WOW.js and AnimateCSS:
https://jsfiddle.net/xs2b49qs/
This is the non-working use of the plugin WOW.js and AnimateCSS:
https://jsfiddle.net/hv4Lv4g3/
What I also noticed while making the JSFiddles is without the CSS/style component of the document, it actually works. But as soon as I added the style CSS component, it doesnt work.
Can any of you tell me why this is?
Thanks for all answers!
Found the answer:
Before I had:
html, body{
height: 100%;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
}
And for some reason this didnt allow the WOW.js plugin to work
But then I changed it to:
html, body{
margin: 0 auto;
overflow-x: hidden;
}
.. and it worked!
Im not sure if this has side effects to it though. Will comment if there is!
I downloaded some free web templates and updating the site as per my needs. I observed most of site content is displayed in upper case. Can someone help me, how to disable this?
Attached is the screenshot of the page. All links and content is displayed in uppercase.
How to display this in normal case letters?
Following is my html before body
<!DOCTYPE html>
<html>
<head>
<title>Freee-Learn. Your learning partner...</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/myJavaScript.js"></script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
</head>
And also i observed, when the internet is off, the site is displayed in normal case letters.
It's the fonts that you're using in the website. The fonts are downloaded from an Google API. Download the fonts to use locally or use another font.
One of the web fonts you're leveraging (Alegreya Sans SC) is only available as a small caps family. When your "internet is off", the web font is not being loaded and therefore a default family is leveraged which most likely supports lower case.
To fix this, find where you're using Alegreya Sans SC within your stylesheets and simply switch to a more multi-case friendly family.
Looks like the google font Alegreya is causing this google.com/fonts/specimen/Alegreya+Sans+SC
I'm working on my personal website (building from a template) and just as I finished up, my links stopped responding to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I've done a fair bit of searching about this already, and it seems there may be some JavaScript that's overriding the default behavior for the tag. I've tried looking in the Network and EventListener sections of the Chrome and Firefox DevTools, but I'm not entirely sure what I'm looking for.
I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.
Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Mike Lipson | Instructional Technology Specialist</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
<style type="text/css" media="screen">
a.heading_link {
color: white;
}
</style>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
The carousel API automatically catches any click on [data-slide] or [data-slide-to] elements (tags that possess the data-slide or data-slide-to argument).
And you set on one of your main containers the <div data-slide="1"> attribute (see index.html#L68) therefore any click will be catched and prevented (e.preventDefault()).
You can see that in the carousel plugin definition js/carousel.js#L187.
So you should either remove this attribute and use another attribute name, or deactivate the carousel API.
My first attempt at using Cufon has caused me a few problems as I just can't seem to get it to work. The Coda's Javascript log is giving me this error (ReferenceError: Can't find variable: Cufon) From a few tutorials I have followed them precisely have been back and forth downloading the libraries over and over and nothing is working. If you guys could have a look and help me out, it would be much appreciated.
Here is my code;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- Styles go here -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- End styles here -->
<!-- Scripts go here -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="scripts/A.font.js"></script>
<script type="text/javascript" src="scripts/cufon.js"></script>
<script type="text/javascript">
Cufon.replace("p");
</script>
<!-- Scripts end here -->
</head>
<body>
<p>Test</p>
Test
</body>
</html>
Thanks.
This error occurred because you've loaded Cufon after the font has been loaded that requires it, so try to change the order, first load the cufon.js
<script type="text/javascript" src="scripts/cufon.js"></script>
and then load the A.font.js
<script type="text/javascript" src="scripts/A.font.js"></script>
I know this doesn't directly answer your question, but please don't use Cufon. Use CSS 2.1's #font-face instead. It's very easy and 100% accessible whereas Cufon is not.
Here are the only 2 links you need to use #font-face in your CSS:
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
http://www.fontsquirrel.com/fontface/generator