This is asked many times but I could not figure out how to select the navbar.
My HTML:
<body class="overflow-hidden">
<!-- NAV BAR -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top w-100 pmc-bg-primary">
<div class="container-xl text-white">
</div>
</nav>
<!-- END NAV BAR -->
</body>
I want to remove the navbar from React Native Web View.
Here is my React Native Code:
const runFirst = `
let selector = document.querySelectorAll(".navbar.navbar-expand-lg.navbar-light.fixed-top.w-100.pmc-bg-primary")
selector.style.display = "none"
`
<WebView source={{uri: showWebView.url}} injectedJavaScript={runFirst} />
I believe the issue is related to how I select the navbar using querySelectorAll
What is the correct way to select the navbar to be able to remove it from the Web View?
Related
I am having trouble with my Store < a href> I want it to redirect to the store page which is on a different site. it works when you right click it and select "Open Tab" or "Open new tab", but not when you regularly click it. I've tried moving around different things and checking to see if everything's right.
Thanks.
<!-- Navigation panel ================================================== -->
<nav class="main-nav dark transparent menu fixed">
<div class="transparent wrapper relative clearfix">
<!-- Main Menu -->
<div class="nav-wrapper large-nav float-left">
<ul class="clearlist">
<!-- Item With Sub -->
<li>
Store
</li>
<!-- End Item With Sub -->
</ul>
</div>
<!-- End Main Menu -->
</div>
</nav>
<!-- End Navigation panel -->
See your script.js file on line number 643 and 646 there is a return false statement.
Remove that statement.
Because it is triggered by clicking on the link and it returns false. Links which have a return false in their onClick event wont take you to the corresponding href
It works in my PC.
Can it show an address when your mouse enter the a tag like this?
enter image description here
May the other TAGs display above it if it cant show hover style.
I tried removing the "http" and it works! Also with "https" it works. Weird though!
<!-- Navigation panel
================================================== -->
<nav class="main-nav dark transparent menu fixed">
<div class="transparent wrapper relative clearfix">
<!-- Main Menu -->
<div class="nav-wrapper large-nav float-left">
<ul class="clearlist">
<!-- Item With Sub -->
<li>
Store
</li>
<!-- End Item With Sub -->
</ul>
</div>
<!-- End Main Menu -->
</div>
</nav>
<!-- End Navigation panel -->
First: it works on my PC.
Second: You should take a look at browser console. Maybe it will get this error:
Refused to display 'https://www.google.com.vn/?gfe_rd=cr&ei=5w1mWMz2LZHD8AfEkbWABQ&gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Your target link disallow loading from outside of their domain.
Your script.js discard default behavior by returning false on click event:
menuSub.on("click",function(){
// ...
return false; // <-- here
}
href="http://mylink.abc"class="active"
Umm, there should be a space between href and class or maybe it's my browser's issue loading this comment.
In my google account, for example, when I click their youtube icon, it opens youtube in a browser tab. Is it allowable/possible to have icons open as tab of a tab bar within the html body, directly below the browser bar, having the code of the site of whatever icon is clicked begin a few lines lower?
Having a navigation bar on the top of your page is as follows:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
</nav>
If you meant having links to other pages openning in a new tab in your browser there is an attribute called target to an <a> element, if you give it the value _blank it opens the link in a new tab
So your navbar should look something like this:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
<ul>
<li>
Youtube
Google
Facebook
</li>
</ul>
</nav>
Hope that answers your question, let me know if it doesn't :)
EDIT:
If you're trying to achieve these sites displayed within your site and keep the bar presented above you might want to take a look at iframe documentation which basically is having another document (html page) within yours
I am trying to link an image to a website i'm building but i am having trouble linking the img. It's on my desktop and i believe i've taken the right steps, but i keep getting a "broken image symbol". Please take a look at the code and let me know if anything is wrong.
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
</div>
<div class="container">
<div class="navbar-header">
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')">
</div>
<div class="row">
<!-- insert rows here -->
</div>
</div>
</div> <!-- End of Container -->
</nav> <!-- End Nav Bar here -->
Ok first moan - indent your code (unless its just from copying and pasting into SO and it messed the format, in which case - sorry for the moan xD)
I have a feeling, the image isn't showing because it's 404'ing - if you open up the browser console / firebug it should show you if it's 404'ing
secondly, you're using images src correctly but is the file structure? Should be something like:
html
index.php
somepage.php
img
img1.jpg
img2.jpg
this means that if you called img in index.php like:
<img src="img/img1.jpg" class="some-class" id="some-id" />
it should show - let me know if it works :)
(notes)
don't have to be a .php file - tis just what I'm used to
You are not closing your tag properly! Do this:
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')"/>
Also, make sure that your path is correct, you are using a relative path for your project. Can you post your project structure?
I have insert a menu in my index:
<nav id="mainmenu" class="navbar navbar-default" role="navigation">
But when I try to validate it (in local) the validator.w3 tell me:
Warning: Element nav does not need a role attribute.
I can't find a solution, can someone help me?
Delete role="navigation".
The <nav> element already has the semantics of being for navigation. You don't need to add them with the role attribute. Saying "This navigation element is for navigation" is redundant and silly.
<nav id="mainmenu" class="navbar navbar-default">
I've looked through a bunch of tutorials, and I've read a bunch of answers to questions on here. I can't figure out what's going on. I am linking to bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery, and bootstrap-dropdown.js, in that order. When I click on each from the page source, it shows up correctly. When I click the dropdown, however, nothing happens. Here's the html code for that:
<!--begin bootstrap navbar-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Sign Up</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>my page</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/end bootstrap navbar-->
If anyone has any ideas, let me know.
A very common issue is the order that you load the javascript files. You have to load jquery before bootstrap javascript file. CSS file order doesn't matter.
EDIT
It worked when I copy-pasted your code, and changed the href in this line from "/signup/index" to "#"...
<li class="dropdown">Login<b class="caret"></b>
See...
Bootstrap menus activate with a click (rather than hovering), and if the link actually leads somewhere it'll skip dropping the menu down and navigate instead.
You should only link EITHER bootstrap.js or bootstrap-dropdown.js. Apparently, it can create some conflicts, because this is the only thing I had to change. I have done this previously without issues, however.
I had a similar issue, where the navbar dropdown wouldn't react when I clicked on it. I was trying to adopt http://twitter.github.io/bootstrap/examples/starter-template.html to my design.
Ultimately the issue missing jquery.js.
Here's the piece of code looking for jquery.js.
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
After I copied in the missing jquery.js to proper folder, everything worked fine.
Bootstrap Nav-Bar Template with React:
Similar issues with the drop down on mobile view not clicking the drop down..Just missing lines I took from w3c.. ajax was missing.:
Reference____
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h
CODE BELOW GOES IN YOUR HTML HEADER
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>