So I'm trying to make an entry page in the BigCartel theme 'Sidecar'. I have managed to get an image in there fine that is clickable to be redirected to my products however I want to be able to remove the side navigation links/icons on the entry page - so it's purely just the image being shown & once the customer clicks on the image to be taken to the shop the side bar appears - is this doable?
I appreciate all thoughts & comments - thanks much!
There might be more elegant methods, but this seems to work.
(1) In 'Layout', find <aside> and add {% if page.name != 'Home' %} before it, like:
{% if page.name != 'Home' %}
<aside>
Then find </aside> and add {% endif %} after it:
</aside>
{% endif %}
The sidebar is <aside>, so what we're doing here is only including that code if the page name is not 'Home'.
(2) In 'CSS', find:
.page.home {
margin-right: 16px;
padding-top: 60px;
}
And change it to:
.page.home {
margin-right: 16px;
margin-left: 16px;
padding-top: 60px;
}
The .page class usually has a margin-left of 260px to provide space for the sidebar, so here we're overriding it when we're on the home page.
Related
I created a custom page for an array in Laravel, why in my view does it look vertical and not horizontal? I want a horizontal view of my links.
<div class="pagination">{{ $myArray->links() }}</div>
.pagination li {
display: inline-block;
}
I have a circle+arrow next to a text in a CTA button and i'd like both to change color at the same time when hovering over either of them. Right now when hovering over the text the arrow does not change color, not sure how to write the :
<div class="cta-div">
<a class="cta-btn" href="#" role="button">SAVE NOW <i class="fa fa-
chevron-circle-right " style="font-size:34px;color:#efd43d; vertical
-align:middle; padding:0 0 3px;"></i></a>
</div>
sass rule:
.cta-btn, .fa-chevron-circle-right {
&:hover {
color: $btn-bkg-hover-color !important;
}
}
I have set this up and working in a fiddle: https://jsfiddle.net/roob/9Lsjstf7/1/
Any help is appreciated. If this is a duplicate post then please post a link.
You do not hover on them separately - you just hover on the anchor and when you do that you also hover the child so:
.cta-btn:hover, {
color: #e8e2bb !important;
.fa-chevron-circle-right {
color: #e8e2bb !important;
}
}
Not sure about the !important ... left it as you may need it for some reason.
I have a Zurb Foundation 3 navigation menu. When the page is on a phone, it correctly shows the phone version of my menu system.
However, the only way to activate the menu is to tap the down=arrow triangle on the right. I want to have the title also be active.
EDIT: Added this link to a simple working version of the home page.
Notice, tapping the bar or the word "menu" highlights the bar, but only the arrow makes the menu appear.
I am hiding the name ("Menu") on the desktop and showing it on the phone like so:
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name show-for-small">
<h1>Menu</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
etc.
Since I expect a lot of people will tap on the title "menu" to access the menu I want to make it do the same as tapping the arrow on the right.
IF you adjust:
.top-bar ul > li.toggle-topbar {
cursor: pointer;
display: block;
height: 45px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
and change the width value to:
width 100%;
It will work - in your app.css add:
.top-bar ul > li.toggle-topbar {
width: 100%;
}
The CSS method is one way, but I would up modifying jquery.foundation.topbar.js, line 45 (which is the function below) I changed '.top-bar .toggle-topbar to '.top-bar .toggle-topbar, .top-bar .title'
$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) {
e.preventDefault();
if (methods.breakpoint()) {
settings.$topbar.toggleClass('expanded');
settings.$topbar.css('min-height', '');
}
if (!settings.$topbar.hasClass('expanded')) {
settings.$section.css({left: '0%'});
settings.$section.find('>.name').css({left: '100%'});
settings.$section.find('li.moved').removeClass('moved');
settings.index = 0;
}
});
We have setup the twitter bootstrap dropdown to work on hover (as opposed to click [yes we are aware of the no hover on touch devices]). But we want to be able to have the main link work when we click it.
By default twitter bootstrap blocks it, so how can we re-enable it?
Just add disabled as a class on your anchor:
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b></a>
So all together something like:
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Since there is not really an answer that works (selected answer disables dropdown), or overrides using javascript, here goes.
This is all html and css fix (uses two <a> tags):
<ul class="nav">
<li class="dropdown dropdown-li">
<a class="dropdown-link" href="http://google.com">Dropdown</a>
<a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
Now here's the CSS you need.
.dropdown-li {
display:inline-block !important;
}
.dropdown-link {
display:inline-block !important;
padding-right:4px !important;
}
.dropdown-caret {
display:inline-block !important;
padding-left:4px !important;
}
Assuming you will want the both <a> tags to highlight on hover of either one, you will also need to override bootstrap, you might play around with the following:
.nav > li:hover {
background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
color: black; /*dropdown item text color*/
}
For those of you complaining about "the submenus don't drop down", I solved it this way, which looks clean to me:
1) Besides your
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
put a new
<a class="dropdown-toggle"><b class="caret"></b></a>
and remove the <b class="caret"></b> tag, so it will look like
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2) Style them with the following css rules:
.caret1 {
position: absolute !important; top: 0; right: 0;
}
.dropdown-toggle.disabled {
padding-right: 40px;
}
The style in .caret1 class is for positioning it absolutely inside your li, at the right corner.
The second style is for adding some padding to the right of the dropdown to place the caret, preventing overlapping the text of the menu item.
Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret.
I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.
// Medium screens and up only
#media only screen and (min-width: $screen-md-min) {
// Enable menu hover for bootstrap
// dropdown menus
.dropdown:hover .dropdown-menu {
display: block;
}
}
This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.
An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.
You could use a javascript snippit
$(function()
{
// Enable drop menu clicks
$(".nav li > a").off();
});
That will unbind the click event preventing url changing.
Here's a little hack that switched from data-hover to data-toggle depending the screen width:
/**
* Bootstrap nav menu hack
*/
$(window).on('load', function () {
// On page load
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
}
// On window resize
$(window).resize(function () {
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
} else {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
}
});
});
This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:
Posts
<ul class="dropdown-menu navbar-inverse bg-inverse">
<li>Create</li>
</ul>
Now you click the caret for dropdown and the link as a link. No css or js needed.
I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.
Im creating a webapplication in django to which Im very new.
what I want to do is on user click open a modal window (basically just an absloute positioned div) which contains a {% block some_content%} tag. This block should then contain either a log in form or a register form (or anything else). I want to load this using ajax (so that nothing is loaded in vain).
here is the part of my template where i want the stuff to appear:
<div id="modal" style="position: absolute; top: 60px; left: 100px; height: 400px; width:700px; background: #777; z-index: 20">
<div class="button">Test</div>
<br />
{% block test_content %}{% endblock test_content %}
</div>
and here is my ajax.py
#dajaxice_register
def tester1(request, user_id):
print "test " + user_id
#contenxt = Context({'items': range(2)})
print "1"
return_str = render_block_to_string('my_site/testr.html', 'test_content')
print "7"
return HttpResponse(return_str)
Im using snippet http://djangosnippets.org/snippets/942/
following the print "#" leads me to believe that this works all the way up to the
return HttpResponse(return_str)
where nothing seems to happen, not even an error message.
forgot to include the template i want to load to the block:
{% extends "my_site/header.html" %}
{% load url from future %}
{% block test_content %}
<div style="background: red; height: 70%; width:90%">
<span>HEJ!!!</span>
</div>
{% endblock test_content %}
if there is a better approach Ill be glad to know about it but remember, Im new to django so please go slow.
You seem to be using the Dajax framework. Have a look at the examples there.
Some of those examples may be outdated so take a look at this site.
If you have Dajax and Dajaxice installed you can do something like
<div id="test_content"></div>
load ajax content
ajax.py in your app
#dajaxice_register
def ajax_test:
str = 'Hello World'
dajax = Dajax()
dajax.assign('#test_content', 'innerHTML', str)
return dajax.json()
So, here is my solution:
I have Dajax installed. The reason it didn't work is below but here is a complete solution that works.
html:
<input type="button" name="testerbutton" value="Test" id="testerbutton" onclick="Dajaxice.my_site.tester1(Dajax.process);">
<br />
<div name="result" value="" id="result">
ajax.py:
#dajaxice_register
def tester1(request):
dajax = Dajax()
str = render_to_string('my_site/testr.html')
dajax.assign('#result', 'innerHTML', str)
return dajax.json()
testr.html:
<div style="background: red; height: 70%; width:90%">
<span>HEJ!!!</span>
</div>
And the most important part -- something it appears I can only blame myself for: make sure you correctly import jquery.dajax.core.js in your header. Otherwise Dajax.process does nothing.
Thanks #pyronic for the help.