Polymer with elements in main page not showing in IE - polymer

Why is it that this Works in Chrome, but not in IE:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel='import' href='base-element.html'>
</head>
<body>
<base-element></base-element>
</body>
</html>
With this in the base-element
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="base-element">
<template>
<div>test</div>
</template>
</dom-module>
<script>
Polymer({
is: 'base-element'
});
</script>
When this doesn't
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<dom-module id="base-element">
<template>
<div>test</div>
</template>
</dom-module>
<script>
Polymer({
is: 'base-element'
});
</script>
<base-element></base-element>
</body>
It works in Chrome alright, but not in IE
Cheers
Stack Overflow thinks I have too much "code" in this post ... so please skip this nonsense: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu erat vel nunc lacinia commodo a sed nisl. Quisque commodo turpis sed diam fringilla cursus. Nunc nisi mi, lacinia maximus lacus in, elementum vehicula purus. Suspendisse ut dolor nisi. Nunc porttitor sem quis viverra molestie. Cras porta in risus tempor molestie. Fusce at magna tellus"


This seems to work:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<dom-module id="base-element">
<template>
<div>test</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() { Polymer({
is: 'base-element'
});});
</script>
<base-element></base-element>
</body>
Its the HTMLImport that does the trick .... but I have no clue why. Anyone? :-)

Related

code stopped working after migrating from codepen

So, this is the weirdest thing ever. I was working on a project on codepen(of course in codepen is a lot easier).
How do you migrate from codepen? Well, you pretty much just add the basic html tags and links so you can communicate between the css and js.
But although I'm doing all of that correctly(also adding the required libraries), my code does not work correctly.
What my code should be doing:
- Allow the user to drag the windows
But it's not!
Even more, all of the Jquery and Jquery UI functions are not working correctly. When I looked at the console, I found the following error "ReferenceError: $ is not defined".
Alright, now the code I'm using is here: http://codepen.io/julian-a-avar/pen/xbaRJz
And as expected everything is the same but the HTML file:
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
</body>
</html>
Yes, the file name are correct, and I'm using C9.io
Please help out, maybe I'm missing something.

ReferenceError: $ is not defined
I figured that it happened in your script.js where you implement the drag and drop functions.
So fixing the order of the scripts might fix the issue.
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</head>

You included your script before jQuery, so $ doesn't exist.
Order matters.

You should add your script after you have loaded the jquery libraries.
It is also good practice to load scripts at the end of your file, just before </body>.
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>

Css/HTML Works in one directory and not in another

I'm trying to do some basic html/css and it doesn't work in one directory of my computer but works on all other directory's. (I'm using a mac and tried on a user level root sites folder and the page does not show up properly.) If i move the folder with all of my files in it (exact same files as in the sites folder) to another directory it shows up properly and works fine..Is there an issue with permissions or something that would cause this?
Thanks!
Code as requested:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
<div class="col-xs-6">
<p>Donec sollicitudin mi et magna. Proin non est. Vestibulum diam. Quisque in enim. Sed id dui. Nunc nec sapien. Nulla lacus. Quisque in ante vel nunc semper pellentesque. Nam sit amet lacus sit amet ipsum auctor eleifend. Quisque vitae justo eu neque mattis pellentesque. Suspendisse tristique. Nulla facilisi. Pellentesque hendrerit tristique turpis. Pellentesque eget mi. Vestibulum a lacus.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Within the sites folder it comes up as 2 rows instead of 2 columns and outside of my sites folder it comes out properly as 2 columns instead of 2 rows.

Retrieve a part of an html string from entire html string in iOS

I want to retrive a part of html string from a full html document eg:
"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px '.Helvetica Neue Interface'; color: #333333; -webkit-text-stroke: #333333}
span.s1 {font-family: '.HelveticaNeueInterface-M3'; font-weight: normal; font-style: normal; font-size: 20.00pt; font-kerning: none}
</style>
</head>
<body>
<p class="p1"><span class="s1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="Apple-converted-space"> </span></span></p>
<p class="p1"><span class="s1">Mauris eget neque eu mi condimentum luctus.<span class="Apple-converted-space"> </span></span></p>
<p class="p1"><span class="s1">Maecenas eu nisl luctus, tincidunt orci at, ultrices augue.</span></p>
<p class="p1"><span class="s1"><span class="Apple-converted-space"> </span>Suspendisse sed nulla lacus. Integer<span class="Apple-converted-space">  </span>vulputate sodales.<span class="Apple-converted-space"> </span></span></p>
<p class="p1"><span class="s1">Maecenas quis faucibus risus. Sed pellentesque tortor nec leo porttitor sodales. Vivamus imperdiet et diam et pretium. Integer luctus tempus odio eget scelerisque. Curabitur adipiscing sagittis vehicula.</span></p>
</body>
</html>"
From this I want to retrive "Mauris eget neque eu mi condimentum luctus. " with all the enclosing tags.

Create a UIWebview and feed it with your HTML. Then use -stringByEvaluatingJavaScriptFromString to retrieve the elements of your HTML, in this case: (note: I have not tested it)
NSString *someHTML = [wView stringByEvaluatingJavaScriptFromString:#"document.getElementsByClassName('s1')[1].innerHTML;"];

It's possible using javascript. you need to execute document.body.textContent in your webview using stringByEvaluatingJavaScriptFromString: method.
NSString *text = [webView stringByEvaluatingJavaScriptFromString:#"document.body.textContent;"];

Bootstrap 3 responsive layout

Im trying to align my section content exactly the same in every screen resolution I tried to use min-width and max-width but it isnt working as it should here is the code and the working link is
http://www.cinqomedia-test.com/cs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Creative Style is one of Bahrain's most highly regarded providers of contemporary interior design services.">
<meta name="author" content="Cinqo Media">
<link rel="shortcut icon" href="ico/favicon.png">
<title>Creative Style - Stylish, Comfortable & Luxurious Furniture</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/onepage-scroll.css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>
<script type="text/javascript" src="js/jquery.onepage-scroll.js"></script>
<script charset="utf-8" src="js/modernizr.js" type="text/javascript"></script>
</head>
<body cz-shortcut-listen="true" id="fade">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/creative-style-logo.png" class="img-responsive" alt="Creative Style"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Projects</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="main">
<section class="page1">
<div class="layer">
<div class="container theme-showcase">
<div class="jumbotron">
<h1>Class Defined</h1>
<h4>Since 2002, Kingdom of Bahrain</h4>
<p>View More Projects </p>
</div>
</div>
</div>
</section>
<section class="page2">
<div class="col-xs-12 col-md-8">
<div class="section2">
<h1>Lorem Ipsum</h1>
<p>Donec faucibus ipsum id sapien ultrices, a vulputate elit imperdiet. Morbi at euismod nisi. Praesent venenatis tempus ligula. Nunc dignissim ullamcorper velit, eu semper metus imperdiet vel. Nulla gravida mauris a nunc hendrerit, ut gravida diam hendrerit. Nam ac tempus felis, a posuere justo. Proin sollicitudin elit commodo consequat vulputate. Mauris convallis consectetur nulla vestibulum iaculis. Nulla facilisi. Nunc quis arcu urna.</p>
Read More
</div>
</div>
</section>
<section class="page3">
<div class="container theme-showcase">
<div class="jumbotron">
<h1>Lorem Ipsum</h1>
<p>Donec faucibus ipsum id sapien ultrices, a vulputate elit imperdiet. Morbi at euismod nisi. Praesent venenatis tempus ligula. Nunc dignissim ullamcorper velit, eu semper metus imperdiet vel. Nulla gravida mauris a nunc hendrerit, ut gravida diam hendrerit. Nam ac tempus felis, a posuere justo. Proin sollicitudin elit commodo consequat vulputate. Mauris convallis consectetur nulla vestibulum iaculis. Nulla facilisi. Nunc quis arcu urna.</p>
Read More
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section"
});
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.2.0/holder.js"></script>
</body>
</html>

You have couple of issues. 1) you have had an extra closing div after the closing div for <div class="main">. 2) you have used col-md-8 div without row or container, so it will consider the width of the parent.
Bootstrap .container class has a predefined width according to the screen size. as well as 'col-xx-xx` classes have their own width.
I have modified your markup and added a container and row inside the section. You may have look into this at: http://jsbin.com/OzAMeZI/1 and edit it at http://jsbin.com/OzAMeZI/1/edit .
If you want to get a white arrow shape to the col-md-8 class, you can consider :before or :after pseudo` classes to section or container elements. But, please make sure that you use media queried css styles.

can't see html 5 tags

Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Html Basics</title>
</head>
<body>
<header style="background-color:lightcoral">
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" width="50px" height="50px"/>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Go!!!</li>
</ul>
</nav>
</header>
<section>
<article style="background-color:aqua">Article 1</article>
<article style="background-color:grey">Article 2</article>
</section>
<aside style="background-color:palegreen">Aside</aside>
<footer style="background-color:aliceblue">Footer</footer>
</body>
</html>
I can't see any HTML 5 effects like aside tag in Chorme Browser
version 25.0.1364.152 m.

The tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
Please see below code:
<!DOCTYPE html>
<html>
<head>
<title>Lorem</title>
</head>
<body>
<div style="font:Arial, Helvetica, Sans-Serif;width:50%;">
<aside style="font-size:larger;font-style:italic;color:green;float:right;width:35%;padding:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</aside>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec arcu sit amet orci sodales adipiscing. Proin imperdiet accumsan ipsum a eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed diam dolor, scelerisque a dictum id, tempor non est. Nam sit amet congue diam. Curabitur vel nunc nisl. Fusce vel sollicitudin dui. Morbi faucibus, eros vel
</div>
</body>
</html>