I have a weird CSS bug going on with bootstrap-ui tooltip:
http://i.imgur.com/90z6ZIT.png
As you can see, the tooltip isn't directly above "aaa" as it should be.
This is my code:
<!doctype html>
<html ng-app="tooltip_app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class='container' id='results_container2'>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<div class="col-md-4">
<li class="list-group-item"><span tooltip="This is simply a really big really long tool tip longer and longer and longre This is simply a really big really long tool tip longer and longer and longre">aaa</span></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
However, if I literally copy and paste the file into plunkr the css bug goes away:
http://plnkr.co/edit/I5vFu5M8JRwRhK7kRBaL?p=preview
As you can see, everything works and is aligned as expected.
I'm banging my head here because I can't seem to reproduce the bug on jsfiddle or plunkr; it only appears when served by my node.js webserver. How is this possible? I'm using the same browser for both, and if plunkr and jsfiddle are as sandbox-y as they claim the results should be identical.
Related
I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
Sample 2 (Form works but Collapse not):
<html>
<head>
<title>Test form</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="about">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Search</h1>
<form method="get">
<input name="test" type="text">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</body>
</html>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!
jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.
It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.
Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.
I'm very new to this so forgive me if I don't properly state things. I started learning Selenium using the IDE record tool for Mozilla. It says you can play back the script in IE by setting up the stand alone server. That worked fine but when I play back, I get the message stated in the title along with a pop up with this very long message. Below is the message.
Every line in the script opens up a new browser window with the same message. Very frustrating. Can anyone tell me what I am doing wrong?
Received command response (!=OK/ERROR): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/assets/displayhelpservlet.css" media="all"/>
<script src="/assets/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/assets/displayhelpservlet.js" type="text/javascript"></script>
<script type="text/javascript">
var json = Object.freeze('{"version":"3.0.1","type":"Standalone","consoleLink":"/wd/hub"}');
</script>
</head>
<body>
<div id="content">
<div id="help-heading">
<h1><span id="logo"></span></h1>
<h2>Selenium <span class="se-type"></span> v.<span class="se-version"></span></h2>
</div>
<div id="content-body">
<p>
Whoops! The URL specified routes to this help page.
</p>
<p>
For more information about Selenium <span class="se-type"></span> please see the
<a class="se-docs">docs</a> and/or visit the <a class="se-wiki">wiki</a>.
<span id="console-item">
Or perhaps you are looking for the Selenium <span class="se-type"></span> <a class="se-console">console</a>.
</span>
</p>
<p>
Happy Testing!
</p>
</div>
<div>
<footer id="help-footer">
Selenium is made possible through the efforts of our open source community, contributions from
these people, and our
sponsors.
</footer>
</div>
</div>
</body>
</html>
Request Data: cmd=getNewBrowserSession&1=*webdriver&2=http%3A%2F%2Ftemplate.ppgtest.local%2FPortal%2FLogin&3=&4=webdriver.remote.sessionid%3D7d276ca5-a3c2-4527-b535-2e38958624ae
I am new to Angular and JavaScript. I want to use ng-include to import elements form htmls, the elements are simple for display. To illustrate, here I have 3 html files, "123.html", "456.html", and "789.html".
For "123.html":
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
</body>
</html>
For "456.html":
<div>
<P> Here is the 456. </P>
</div>
And for "789.html":
<div>
<P> And here is the 789. </P>
</div>
I see some ng-include examples, but all of them got ng-controller and additional JavaScript file. So my question is, if I just want to display html elements, do I still need ng-controller for the code?
P.S. The code above cannot correctly work, could someone help figure out the problem for this very simple example? The browser is Firefox. Thanks.
Angular must at least have the module myApp available since that's what you are declaring in ng-app
It can't bootstrap without that module and errrors in your browser console should be telling you that it can't find it.
If all you are doing is using angular for includes why not just use server side includes?
So you don't have an app called myApp and would get an error referencing a module that is not defined. In the code below you can see I removed it.
That being said you can define templates using the script tag with ngTemplate.
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
Example using both a script template and a separate file.
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app>
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
<script type="text/ng-template" id="789.html">
<div>
<P> And here is the 789. </P>
</div>
</script>
</body>
</html>
right off the bat, I want to explain that I am a total newbie at web design. On that note, I think that I have come across a problem that is beyond my conceptual skill level.
For starters, I have successfully implemented colorbox with an embed youtube video with the following code:
<head>
{js}
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testStyle'}" />
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:435, innerHeight:344});
});
</script>
</head>
<body>
<p> <a class="youtube" href="http://www.youtube.com/embed/" title="horses">
<img src="/uploads/features/featured-block-1.jpg" /></a></p>
</body>
This code works exactly as I would like it to (i.e. it pops up the video which I can then close by clicking outside the box.)
However when I try to embed this code within another block of code using ExpressionEngine I have new problem: when I try to close the pop-up window, the background stays opaque so that i can no longer see the original webpage. Obviously, something is conflicting in the background, but I just have no idea as to what that conflict might be.
Here is the code surrounding the embed (I mark the embed with dashes):
<head>
</head>
{favicon}
{global_stylesheets}
{js}
<body class="technology">
<div id="wrapper">
{embed='embed/header'}
<div id="masthead">
{embed='embed/nav'}
<div id="banner">
<div style="display:none;">
</div>
</div> <!-- END div banner -->
<br style="clear: left;" />
</div> <!-- END div masthead -->
<div id="content-main">
<div id="content-col1">
<h3></h3>
<div id="lead-sentence">
</div>
<div id="main-body{if subpage_graphic != ''}-graphic{/if}">
<h1> Hello world and welcome to my link!</h1>
------- {embed="in-store-analytics/testing2"} --------
</div> <!-- END div text-content -->
<br style="clear: both;" />
</div> <!-- END div content-col1 -->
{embed="embed/crosslinks"}
<br style="clear: both;" />
</div>
{embed="embed/footer"}
</div> <!-- END div wrapper -->
Again, when I click on the linked image, only a black background appears which I cannot get rid of. Any ideas about what might be conflicting in my code so as to make the embed no longer work or ideas how to go about finding out?
Thanks in advance.
It turns out that one of my embeds was calling the Raphael library, which meant that the library was being called twice. Though I know it's not best practice, I still don't understand why this would result in such radically different functionality.