Twitter Feed on IE, Opera, Safari - html

I have a page in which I've implemented the Twitter feed widget. If works nicely on Firefox and Chrome, but on IE, Opera, and Safari, it just comes up with "Tweets by #JackSchaible" and not the actual feed itself. Someone please help?
The url is www.logicanddesign.ca
Alternatively, here's my source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Logic & Design: Home</title>
<link rel="stylesheet" type="text/css" href="styles/divs.css" />
<link rel="stylesheet" type="text/css" href="styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="styles/tags.css" />
<link rel="stylesheet" type="text/css" href="styles/images.css" />
<link rel="shortcut icon" href="images/Icon-OR.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="scripts/animations.js"></script>
<script src="scripts/socialMediaPlugins.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<img id="logo" alt="logo" src="images/Logo.png" />
</header>
<div id="divider">
<img id="headerDivider" alt="Line" src="images/Line.jpg" />
</div>
<nav>
<div class="Button" id="selectedButton">
<img id="arrowOverlay" alt="Overlay" src="images/Arrows/FadeArrow.png" />
<img id="extender" alt="Home" src="Images/Arrows/Arrow%20Body.png" />
<img id="selectedArrow" alt="Home" src="Images/Arrows/Home/Home.png" />
</div>
<div class="Button" id="aboutButton">
<img alt="About Me" src="Images/Arrows/About/About.png"/>
</div>
<div class="Button" id="abilitiesButton">
<img alt="My Abilities" src="Images/Arrows/Abilities/Abilities.png"/>
</div>
<div class="Button" id="portfolioButton">
<img alt="My Portfolio" src="Images/Arrows/Portfolio/Portfolio.png"/>
</div>
<div class="Button" id="contactButton">
<img alt="Contact Me" src="Images/Arrows/Contact/Contact.png"/>
</div>
</nav>
<div id="mainContent">
<div id="innerContent">
<p>Welcome to Logic & Design! If you are looking for work done and it has anything to do with a computer, you have come to the right place! My name is Jack Schaible and I do nearly everything computer-related. Whether it is software analysis, design, web apps, database design, web design or development, whatever your needs, I can fill them. I will take care of the technical side of things so you can focus on what matters: running your business!</p>
</div>
</div>
<div id="imageBar">
<div id="networkingIcons">
<div id="fb" class="fb-like-box" data-href="http://www.facebook.com/logicanddesign" data-width="200" data-height="75" data-colorscheme="dark" data-show-faces="false" data-stream="false" data-header="false"></div>
<a class="twitter-timeline" href="https://twitter.com/JackSchaible" data-widget-id="266804071627898880">Tweets by #JackSchaible</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="g-plus" data-width="199" data-height="69" data-href="https://plus.google.com/105579960548041650339" data-rel="author" data-theme="dark"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
</div>
</div>
<footer>
<p>© <script type="text/javascript">document.write((new Date).getFullYear());</script> Jack Schaible</p>
</footer>
</div>
</body>
</html>

It works on all of my browsers when it is accessed form a server http://localhost/twitter.html or http://www.logicanddesign.ca/ but not when viewed as html file: file:///C:/xampp/htdocs/twitter.html. This seems to be a nuance of the .js script.

Related

Slick Slider not working in AngularJS app

I've added all scripts and css, it is working when the html page alone runs, but not when the app runs. Nothing is showing in the console. I've tried adding css and js references in index page too.
What may be the problem?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css'>
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js'></script>
<script src="js/slider.js"></script>
<script>
$(function () {
$('.slider').slick();
});
</script>
You mention its an angularjs App, but I dont see angularJS referenced in your HTML. If you want an angularJS version of slick carousel, please check this out:
http://devmark.github.io/angular-slick-carousel/#/
Let me know how it goes.
Note: This should have been a comment , but answering as I dont have enough points to comment.

Style issues after ng-include

I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?

i have a slide show code in HTML, but when using chrome or mozzila sometimes when refreshing the page all the images get stacked

i am trying to make a slidehsow using HTML+ CSS
but when using chrome or mozzila sometimes when refreshing the page all the images get stacked
works fine on IE.
enter code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title>
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
Associação Recreativa de Grada
<nav>
<ul class="nav navbar-nav pull-right">
<li>Pagina inicial</li>
<li>Mapa</li>
<li>xxx</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="center jumbotron">
<div id="slideShowImages" class="slideshow">
<img alt="1" src="/assets/1.jpg" />
<img alt="2" src="/assets/2.jpg" />
<img alt="3" src="/assets/3.jpg" />
<img alt="4" src="/assets/4.jpg" />
<img alt="5" src="/assets/5.jpg" />
<img alt="6" src="/assets/6.jpg" />
</div>
<script src="slideShow.js"></script>
</h2>
|Inscrição |
| Lista incritos|
</div>
<div class="logo">
</h1>
<img alt="xxx_logo" src="/assets/logo.png" />
</div>
<footer class="footer">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
CSS code:
.slideshow
{
background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box- shadow:0 0 22px #111;
}
The images become stacked on above anothe. to resolve the issue i must press CTRL F5.
i can not upload a imge so i try to explain with this:
it look like that:
image1
image2
image3
image4
it should look like that
image1
wait 1 sec
image2
...
Try to hide the images using CSS first. The page must not have been loaded fully for the script to run.

MVC mobile page title is changing to null/empty

I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com

Cannot link image to url (<img> tag inside of <a> tag not working for slideshow)

I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}