The following code loads a txt file content in a new tab. But it doesn't preserve newlines even though the content is inside a <pre> tag:
multiline.html:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="js/ui-lightness/jquery-ui-1.8.15.custom.css" type="text/css"></link>
<style>
pre {
border: 1px red solid !important;
}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs({panelTemplate: '<pre></pre>'});
});
</script>
</head>
<body>
<h3>PRE TAG:</h3>
<pre>
Multi
line
FTW
</pre>
<h3>jQueryUI-loaded PRE TAG:</h3>
<div id="tabs">
<ul>
<li>Tab</li>
</ul>
</div>
</body>
</html>
multiline.txt:
I'm line #1
And I'm line #2
Guess what! I'm #3
And woohoo I'm #4 but I wanted to be alone!
As an alternative, I tried to create a jsfiddle, with no success since the browser will yell at me with cross-origin loading error.
You could try wrapping the text with a pre tag:
http://www.w3schools.com/tags/tag_pre.asp
Remember, HTML parsing ignores line breaks. If you want it to render with the line breaks, you need to add <br /> tags.
I am line #1 <br />
I am line #2 <br />
I am line #3 <br />
EDIT: Since you don't have access to the source, you can do something like this (using "content" ID as placeholder for actual container DIV id, replace with your own.):
$("#content").html( $("#content").html().replace("\n","<br />") );
As per jQueryUI ticket #7669, it can't be done with the tabs widget.
Remote tabs expect to load HTML, not plaintext.
Related
I think I understand how placeholders work regarding select2 library.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
The reason is I like to place an icon at the placeholder.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
Is there a workarund for this?
#Marcos i have done some solution regarding placeholder regarding select2 library.
<select class="select2 selectPlaceholder" multiple="multiple"></select>
<script>
$(".selectPlaceholder").select2({
placeholder: "Select Product",
allowClear: true
});
</script>
Optional
allowClear: true
Please let me know if i am right because i got your question but still i have some doubt
understanding Que.
Taking your previous comment as a reference:
"the idea is to place a font awesome icon at the placeholder and
preventing select2 from escaping it, and i'm getting the i tag instead
of the icon"
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
In this case, hovering over the left link makes a tiny dash appear to its right (between the two links). How can I get rid of this? I see this in Safari and Chrome both, but I don't see anything in the style sheet that would make it do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Walls</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="custo.css">
<script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body>
<br>
<a href="gallery.html">
<img src="test.jpg" class="testclass" alt="test" width="170" />
</a>
<a href="info.html">
<img src="test.jpg" class="testclass" alt="test" width="55" />
</a>
<div class="container-fluid">
<br>
</div><!-- .container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
If you're seeing the same thing I'm seeing (I don't have all the style sheets), you're seeing the underline of the a tag for the image.
You can just remove that using text-decoration: none on your image links;
<a href="gallery.html" style="text-decoration: none !important;">
The !important at the end of the style helps to override any selectors in your css which may have already have an !important emphasis.
Of course this is in practice better done using a class that you set on your image links.
This is an old post, but I would like to contribute to something. This will help other people why the dash (-) appears.
This is because there is an empty space inside the a tag. For example:
<a href="#">
<i>test</i>
</a>
If you set your line like this: <i>test</i> the dash/underline will disappear, but some tools might still format your code and they will add the space. So, using the css mentioned in the previous post will eliminate the issue.
I've been trying to get a script that inserts a div of text after the first and second paragraph of an article to work in jQueryMobile. It works on the first pageload, but on the second it loads the content twice, and the third time it's loaded three times, and so on.
The jQueryMobile libraries and my script is loaded in the head:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="myscript.js">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
Then I have
<body id="mobile">
<div id="wrapper" data-role="page">
And then the content of the page
My script is executed as documented on jquerymobile.com
$("#wrapper").live('pageinit', function() {
Am I missing something? Any help will be deeply appreciated.
try adding data-dom-cache="false" it should look like this
<body id="mobile">
<div id="wrapper" data-role="page" data-dom-cache="false">
As Clarence commented, a better solution is to move the <script> tag outside of the <div> with data-role="page"
<body id="mobile">
<div id="wrapper" data-role="page">
<!-- stuff -->
</div>
<script>
$("#wrapper").live('pageinit', function() {
// more stuff
});
</script>
</body>