It seems for some reason the items option here doesn't work. I'm sure I'm doing something wrong but can't get the error. Can you help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test jquery</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]'});
});
</script>
</head>
<body>
<div class="div1">
<img src="home-slider-next-button.png" width="26" height="24" alt="test2">
</div>
</body>
</html>
Ok I took a closer look at the tooltip code and see that it seems it doesn't really take the alt attribute for content. It only uses items content as a selector. So my solution, for now, is to use the content option like this:
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]', content:function(){ return $(this).attr('alt'); }});
});
hope it helps others with the same problem.
Related
I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});
I try to load jQuery Ui Slider in magnific popup.
it's work fine in windows browser but is not work in ios browser..
please help me solve out this question..
Here is Code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="magnific-popup.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.magnific-popup.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
<script>
$(function() {
$('.mgnpop').magnificPopup({
type: 'inline',
closeOnContentClick: true,
callbacks : {
open : function(){
$( "#slider" ).slider();
}
}
});
});
</script>
</head>
<body>
click here
<div id="popup">
<div id="slider"></div>
</div>
</body>
</html>
Yes...now I´m bringing the most simple script in the world...and though I can´t get it work!
MUST the word, tooltip be included in the .js file to work ? It doesn´t exist in my .js
May I include more .js files in my script, or should I just take the newest release ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#outdoor img[title]").tooltip();
});
</script>
<style type="text/css">
#tooltip
{
display:none;
font-size:12px;
height:70px;
width:160px;
padding:20px;
color:Gray;
}
#outdoor #nature
{
margin-top:200px;
}
</style>
<title></title>
</head>
<body>
<div id="tooltip"></div>
<div id="outdoor">
<img src="../img/forest.jpg" id="nature" alt="ghghg" title="I love the nature"/>
</div>
</body>
</html>
You haven't written a tooltip() function in Javascript, that's why it doesn't work.
You need to include in your HTML file, these lines:
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
I know there are similar kind of questions asked and answered as well. But my problem is different. Here is code sample that I am using to load and stylize my content.
$("body").on("click","[data-view]",function(){
var view=$(this).attr("data-view");
$("#mainView").load("pageRouter.php?view="+view).trigger("create");
});
I searched forums and found .trigger("create") is the way to stylize the dynamically loaded content.But it is not helping.
Solution
You are doing it incorrectly, load is asynchronous function so you need to wait for it to load the content before you can enhance the content.
You will need to do this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("create");
});
This will work if you are only loading content but if you are loading a full page, with header and footer then use this:
$("#mainView").load("pageRouter.php?view="+view, function() {
$(this).trigger("pagecreate");
});
Read more about lead and its callback here.
Working example:
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$("#index").load("load.php", function() {
$(this).trigger("pagecreate");
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
load.php
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a data-role="button">Button</a>
</div>
I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click.
Code i have now:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p>Show alert</p>
</div>
</div>
</body>
</html>
I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function.
Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called.
Anybody has any ideas?
onDeviceReady() is only called once (when the device (ie Cordova) is ready). You'll want $(document).on('pageinit', '#pageid', function() { }); for something to fire every time the page is navigated to.
In the body tag you need to add tag and the onBodyLoad() function in the javascript should be like:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
I am a total noob with phone gap and query mobile, so i made a stupid mistake. Problem is, that it loads not whole page, when i click on button, but only body part. This means, that it uses only javascript which is in the first page. And that was my problem. Now i have putted all javascript into separate file (all javascript for both files) and it works.
Try the following with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function showAlert() {
navigator.notification.alert("Cordova is working");
}
$(function() {
$("#my_link").click(function() {
showAlert();
});
});
</script>
</head>
<body>
<div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal">
<div data-role="header" data-position="fixed">
<h1>Title</h1>
</div>
<div data-role="content">
<h1>Alert</h1>
<p><a id="my_link" href="#" data-role="button">Show alert</a></p>
</div>
</div>
</body>
</html>
Hope this helps. Let me know about your results.
Even though i had z-index set higher for the md-button it still wouldn't click on iOS. It clicked fine on Android. I had to set a parent container in my case the <md-subheader> to z-index: -1; then it worked.