The collapsed navbar for mobile versions will not open. The website is www.insaka.org. This is the navbar code. I could have sworn it was working last time I checked it, but now it is not. Any ideas?
<div class="container">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<%= render 'layouts/navigation_links' %>
<% render 'layouts/nav_links_for_auth' %>
</ul>
<div>
Donate
</div>
<div>
<img class="featurette-image img-fluid mx-auto img-responsive max-width:25px height:auto" src="../images/blue insaka logo.jpg">
</div>
</div>
</nav>
If you check for javascript errors in the console you will find the problems:
popper.min.js
bootstrap.min.js
holder.min.js
These three js files could not be found.
Related
I have a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
I am trying to add a header to the spree commerce website using deface. But the problem is logo is not getting loaded. I have tried the following ..
I have pasted the logo.png file in app/assets/images and in the config/initilazers/spree.rb
I have added config.logo = 'logo.png' in the block existing there.
This was not working, so I added logo.png in the vendor/assets/images.(I created the images folder)
This is the code I am having
Deface::Override.new(:virtual_path => 'spree/shared/_header',
:name => 'Tryint to replace the header',
:replace => 'div#spree-header',
:text => '
<div class="container">
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>BIRTHDAY</li>
<li>ANNIVERSARY</li>
<li>WEDDING</li>
<li>CHRISTMAS</li>
<li>CORPORATES</li>
<li>STORE</li>
</ul>
</div>
</div>
</nav>
</div>
'
)
The above code file is present in the overrides/update_header.rb. It works fine except the logo does not show
I was using img tag in html, instead of using image_tag as in rails way. And it should be like this <%= image_tag("rails.png") %> where rails.png is in app/assets/images
I have strange error with images (never encountered it before).
This is screenshot of the main page - <%= render 'layouts/header %>
Nothing wrong there...
Now - I have put same code (<%= render 'layouts/header %>) into devise/sessions/new.html.erb and it does not read logos anymore.
(same happens with footer)
-> How to fix this?
-> How to prevent it in future?
I thought that rails will always load images the same way it does every time.
header.html.erb
<header id="home">
<div class="main-nav">
<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="index.html">
<h1><img class="img-responsive" src="assets/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
</ul>
</div>
</div>
</div><!--/#main-nav-->
Fixed
Problem was that I should have used image_tag instead of standard html img src.
So:
This:
<img class="img-responsive" src="assets/logo.png" alt="logo">
Should be changed to this:
<%= image_tag("logo.png") %>
I am using bootstrap from a CDN with my rails app. Most of the styling works except for the carousel on the home page. It works fine in development but not at Heroku. I don't know if this is relevant but I have defined this route in routes.rb: root "home#index" which displays index.html.erb via the HomeController. The first image in the carousel is loaded but that is it. It has no functionality. Right now I have no bootstrap gems in the gem file which I will try if necessary. I just wanted to see if anyone has seen this issue before and knows what to do. I think this file is OK since it works in development but here is index.html.erb:
<div id="myCarousel" class="carousel slide img-rounded" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<%= image_tag("nicholson2.jpg", alt:"nicholson", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("marilyn2.jpg", alt:"marilyn", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("pacino2.jpg", alt:"pacino", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("lily.jpg", alt:"lily", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("deniro2.jpg", alt:"deniro", class: "img-rounded") %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I resolved this by using https: instead of http: when linking to external resources. It works in development but evidently heroku does not allow it.
I had the same issue, in my case i had to remove the //=require jquery_ujs from the application.js file (assets/javascripts/application.js). Hopefully it will resolve the issue. :)
I have the following snippet. I am unable to toggle the data values in smaller resolution though the button appears on the scree. No data has been displayed when I click on toggle button.
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-headerdata-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-headerdata-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About Us</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Can someone help resolving the issue?
Thanks
This was just because of improper linking of bootstrap JS.!