Since I make website with wordpress, which is the jquery affect part not show in IE7 and IE8, read the browser error, it show: object not support this method: 'getElementsByClassName', in this case i add follow code in header.php:
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9"/>
and to justify the browser version:
<!--[if lt IE 8]>
<script src="<?php echo get_template_directory_uri(); ?>/js/wow.js"></script>
<![endif]-->
<!--[if IE 8]><script src="<?php echo get_template_directory_uri(); ?>/js/wow_ie8.js"></script><![endif]-->
<!--[if !IE]><!--><script src="<?php echo get_template_directory_uri(); ?>/js/wow.js"></script><!--<![endif]-->
And for js file part:
I just change
wow.js
code to
wow_ie8.js
from
this.boxes = this.element.getElementsByClassName(this.config.boxClass);
to this code:
this.boxes = this.element.querySelectorAll(this.config.boxClass);
Somehow the website still show the error: object not support this method: 'getElementsByClassName'
Is anyone could give me the solution to solve this problem?? thanks a lots!!
Related
gsaconst2/application/site/views/index.php
I already place tiny mce js in assets but unable to load it correctly. Can anyone help me check my codes if it is correct?
<!DOCTYPE html>
<html>
<head>
<script src="<?php site_url('assets/tinymce/js/tinymce/tinymce.min.js'); ?>"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>
Change this:
<script src="<?php site_url('assets/tinymce/js/tinymce/tinymce.min.js'); ?>"></script>
To this:
<script src="<?php echo site_url('assets/tinymce/js/tinymce/tinymce.min.js'); ?>"></script>
I am running on Magento 1.7 and its a fresh copy.
What I want to achieve:
On pageload of the website, display the newsletter template block
{{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}
as a pop-up window in Magento once, where the cookies will expire after a given period of time eg: 1 week.
The answers on web are either not specific, or not detailed enough as my knowledge is not broad on scripts.
What I tried so far:
attempt to add a lightbox:
1) Add Lightbox CSS & JS
<script type="text/javascript" src="<?php echo $this->getJsUrl('lightbox/lightbox.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getJsUrl('lightbox/lightbox.css'); ?>" media="screen"/>
2) In view.phtml I added a link
Size chart
The lightbox is working but the static block is not called... still figuring out how to call a static box..
I have successfully called a popup consisting static block using the steps below.
http://jsfiddle.net/5USUu/
So basically we need to:
Add .js and .css files - I'm using colorbox
Define the function
Call the function
1) Add the following script in header
<link rel="stylesheet" type="text/css" href="<?php echo $this->getJSUrl('pop/colorbox.css'); ?>" media="screen"/>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getJSUrl('pop/popup.css'); ?>" />
<script language="javascript" src="<?php echo $this->getJSUrl('pop/colorbox.js'); ?>"></script>
<script>
jQuery(document).ready(function (){
if (document.cookie.indexOf('visited=true') == -1){
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
jQuery.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
jQuery(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
});
</script>
2) Add this link in html that link to your pop up
Click here to open the popup
3) Add the html that contains your static block identifier
<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<!-- BEGIN #subs-container -->
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('subscribe')->toHtml() ?>
<div id="subs-container" class="clearfix"> </div>
</div>
</div>
<!-- END subscribe popup-->
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>
So i've got a problem like many others : Facebook Like Box is not diplaying in IE8 (IE7 OK).
I found many posts about that, tried all solutions but did not succed...
IE8 message : FB.FBXML Null or not an object
NB : there's a function which handle resizing of FB Like Box.
Here's my HTML5 code :
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
...
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
<body>
...
<article>
<div class="row" id="content">
<div class="twelvecol last">
<div id="fb-root"></div>
<div class="fb-like-box" data-href="http://www.facebook.com/divstudio" data-width="1140" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
</div>
</article>
...
<script>
$(document).ready(function(){
var contentwidth = $('#content').width();
$('.fb-like-box').attr('data-width', contentwidth - '40');
FB.FBXML.parse(document.getElementsByClassName('.fb-like-box'));
});
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
Any ideas ?
website : http://www.divstudio.fr/emergenza/jazz/actu.html
thx a lot
You should add these lines to the tag.
xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
If there are already any attributes in the tag, leave them as it is. So that the starting html tag becomes like this.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
Clear the cache if caching is enabled. It should work in IE-8
I had the same problem, and adding the appropriate xmlns attributes did not help. As it turns out, what was causing my problem is related to another problem: Facebook like box not showing up when user is not logged into Facebook. Igy and wasim kazi had the answers that led me to the solution. Here's how to solve the problem:
Log onto the Facebook account that manages the page you want reflected in the like box.
On the left nav bar, click on "Pages".
Click on the page title to bring up the admin panel for that page.
Click on Edit Page -> Edit Settings
You'll see a box labeled "Country Restrictions". If there are ANY countries listed in this box, your like box will be blank if the user isn't logged onto Facebook AND it will be blank in Internet Explorer (7, 8, 9). This makes sense: the only way Facebook would be able to enforce geographic restrictions with any certainty would be by making sure the user is logged in. Why this affects IE (whether the user is logged in or not) is a mystery, but that was the cause of the problem in my case.
I had the same issue with the facebook module for drupal 6.
I solved my problem by changing the markup type from XFBML to HTML5
I then added the HTML5 script in the <head> section:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I hope this fixes your problem as well.
I am trying to add a calender in my application. The following code that I have is not working in codeigntier but it works fine if I put it into another folder outside codeigniter. Would you please kindly help me find out what the problem is?
Thanks in Advance
<html>
<head>
<link href="calendar/calendar.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="calendar/calendar.js"></script>
</head>
<body>
<?php
//get class into the page
require_once('tc_calendar.php');
$myCalendar = new tc_calendar("date5", true, false);
$myCalendar->setIcon ("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1971, 2035);
$myCalendar->dateAllow('1971-01-01', '2035-01-01');
$myCalendar->setDateFormat('j F Y');
//$myCalendar->setHeight(350);
//$myCalendar->autoSubmit(true, "form1");
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->writeScript();
?>
</body>
</html>
It's likely that the paths to your assets are off. Try using base_url() in the calls to your assets and see if that helps. Your JS and CSS files would be loaded like this:
<link href="<?php echo base_url(); ?>calendar/calendar.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="<?php echo base_url(); ?>calendar/calendar.js"></script>
base_url() will get you to the root of the application, so if the calendar directory is not at the root then update that path accordingly. Inspect the HTML that is produced and see if it is actually loading the assets.