I have made a drop down menu with CSS using the #nav:hover selector to activate the property and value transition:height
http://jsfiddle.net/bryank/WXAcm/
What I really want to happen:
when user clicks(as opposed to hover) the area activated by #nav:hover once the menu drops and stays dropped. Then if the same #nav:hover area is clicked again the menu contracts.
After some research, what I understand so far, I believe I need to use javascript. I know very little javascript beyond the most basic of basic fundamentals. Im am currently digging through all the relevant javascript I can find, and I think I have bits and pieces to the puzzle... but nothing functioning yet... anyone know a clear and concise way of making this happen ?
Here's a CSS only solution:
DEMO: http://jsfiddle.net/k7HqE/
HTML
<!-- This is what is clicked, you can rework it to wrap the #nav if want -->
<label for="toggler">CLICK ME</label>
<!-- Hidden checkbox that gets toggled when the `label` is clicked -->
<input id="toggler" type="checkbox">
<!-- Your unmodified nav -->
<div id="nav">
<!--logo_image--> <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b>
</div>
<div style="height:1em;"></div>
<!---- AND SO ON ---->
</div>
CSS
/* hide the input */
#toggler { display: none; }
/* transition based on input checked state */
input:checked + #nav {
height:39em;
}
I think I have something :
Javascript :
document.querySelector("#nav").onclick = function(evt){
var arClass = this.className.split(" ");
if(arClass.indexOf("active")>=0){
this.className = "";
} else {
this.className = "active";
}
};
NOTES
indexOf may not work in every browser (IE7 & IE8).
This function will replace all your classes on #nav.
CSS :
#nav:hover,#nav.active{
height:39em;
}
http://jsfiddle.net/JFjwJ/
Related
My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.
If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
I want to achieve a navbar that is first stickied to the bottom of the page. No matter what height the window is, it will stick on the bottom - then I want it to be stickied on top upon scrolling.
I am able to achieve that through a jQuery library, Sticky-Kit http://leafo.net/sticky-kit/. However, all my other elements are overlapped by the navbar. I have changed the z-index of my other elements, that works but now the navbar is overlapped. Same problem, different element. Plus, it doesn't look nice as my content looks like as it goes on the navbar rather than underneath it.
The code on jsfiddle will help you get a picture of what I'm trying to achieve:
http://jsfiddle.net/u6aNX/
In the jsfiddle link above, it does not fully replicate my project but it does replicate the problem. The navbar height increase allowing other elements to be overlapped. Although on my project it does show that it increase but when I check on Chrome Dev Tools, I can see that the height of it is the same as the window.
Extra info:
I am using Bootstrap. .navbar is from Bootstrap
Code:
HTML:
<div class="navbar navbar-bottom" id="sticker">
<div class="container">
<a class="brand" href="https://twitter.com/duaneadam" id="duane-brand">#duaneadam</a>
<ul class="over-nav nav">
<li>Home</li>
<li>About</li>
</ul>
</div> <!-- /container -->
</div> <!-- /navbar /navbar-bottom -->
<div>
<h2>Hello World!</h2>
<p>
Lorem ipsums here to achieve scrolling. Check jsfiddle link
</p>
</div>
CSS: (Custom, overriding Bootstrap)
.navbar-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0px;
}
.navbar {
background-color: #ccff22;
}
JavaScript/jQuery:
/*
Sticky-kit v1.0.1 | WTFPL | Leaf Corcoran 2013 | http://leafo.net
*/
(function(){var g,t;g=this.jQuery;t=g(window);g.fn.stick_in_parent=function(d){var u,k,e,r,B,h,C;null==d&&(d={});r=d.sticky_class;u=d.inner_scrolling;e=d.parent;k=d.offset_top;null==k&&(k=0);null==e&&(e=void 0);null==u&&(u=!0);null==r&&(r="is_stuck");B=function(a,d,h,v,y,l){var p,s,m,w,b,f,z,A,q,x;f=a.parent();null!=e&&(f=f.closest(e));if(!f.length)throw"failed to find stick parent";z=function(){var c,b;c=parseInt(f.css("border-top-width"),10);b=parseInt(f.css("padding-top"),10);d=parseInt(f.css("padding-bottom"),
10);h=f.offset().top+c+b;v=f.height();c=a.is(".is_stuck")?q:a;y=c.offset().top-parseInt(c.css("margin-top"),10)-k;return l=c.outerHeight(!0)};z();if(l!==v)return m=a.css("float"),q=g("<div />").css({width:a.outerWidth(!0),height:l,display:a.css("display"),"vertical-align":a.css("vertical-align"),float:m}),p=s=!1,w=void 0,b=k,A=!1,x=function(){var c,g,n,e;n=t.scrollTop();null!=w&&(g=n-w);w=n;s?(e=n+l+b>v+h,p&&!e&&(p=!1,a.css({position:"fixed",bottom:"",top:b}).trigger("sticky_kit:unbottom")),n<y&&
(s=!1,b=k,"left"!==m&&"right"!==m||a.insertAfter(q),q.detach(),c={position:""},A&&(c.width=""),a.css(c).removeClass(r).trigger("sticky_kit:unstick")),u&&(c=t.height(),l>c&&!p&&(b-=g,b=Math.max(c-l,b),b=Math.min(k,b),a.css({top:b+"px"})))):n>y&&(s=!0,c={position:"fixed",top:b},"none"===m&&"block"===a.css("display")&&(c.width=a.width()+"px",A=!0),a.css(c).addClass(r).after(q),"left"!==m&&"right"!==m||q.append(a),a.trigger("sticky_kit:stick"));if(s&&(null==e&&(e=n+l+b>v+h),!p&&e))return p=!0,"static"===
f.css("position")&&f.css({position:"relative"}),a.css({position:"absolute",bottom:d,top:""}).trigger("sticky_kit:bottom")},t.on("scroll",x),setTimeout(x,0),g(document.body).on("sticky_kit:recalc",function(){z();return x()})};h=0;for(C=this.length;h<C;h++)d=this[h],B(g(d));return this}}).call(this);
$(document).ready(function() {
$("#sticker").stick_in_parent();
});
Your problem is position:absolute, and bottom:0, after you navigation stuck to the top (sticky kit adds style="top:0") and it gets stretched to the bottom of the page.
just add this function:
$("#sticker").stick_in_parent()
.on("sticky_kit:stick", function(e) {
$(".navbar").removeClass("navbar-bottom");
})
which does something when element "is sticky"
opposite to that one is:
.on("sticky_kit:unstick", function(e) {
//do something when "not sticky"
});
http://jsfiddle.net/u6aNX/2/
If you want your navbar to goes back to "onload" position when you scroll up
.on("sticky_kit:unstick", function(e) {
var top_bar = document.getElementById ("sticker");
top_bar.style.top = "";
$(".navbar").addClass("navbar-bottom");
});
http://jsfiddle.net/u6aNX/3/
This question already has answers here:
Is h1 tag that's hidden using display:none given prominence by search engines?
(10 answers)
Closed 9 years ago.
Here are basic example boxes, CSS and JS I created for jQuery Modal Box.
<!-- hidden boxes // -->
<div id="content_1" class="box">
<h1>First Box</h1>
<p>Content goes here...</p>
</div>
<div id="content_2" class="box">
<h1>Second Box</h1>
<p>Content goes here...</p>
</div>
.....
<!-- links for boxes // -->
Show First Box
Show Second Box
<!-- css // -->
<style>
.box {
display: none;
}
</style>
<!-- javascript // -->
<script type="text/javascript">
$(document).ready( function() {
$('.link').click( function() {
// process modal
});
});
</script>
So when User click on First/Second Box link, the jQuery modal popup with content. My Purpose is not to hide the text. I heard and read in some blogs, Google will take action with hidden text. Is my way illegal/bad for SEO? OR are there better way to do this without display:none?
You will find Google themselves actually use display:none; on their homepage - and considering the popularity of jQuery and other JavaScript libraries using these kinds of effects, I can't see how it will negatively impact your SEO if you use it in necessary circumstances.
I use following snippet to hide sub-menus on css3 navigation menus with some cool ease-in, ease-in-out transitions . And afaik this is valid css to hide elements when it comes to SEO.
opacity: 0;
visibility: hidden;
Already discussed at
Is there an alternative to conditional display:none
Instead of using display:none; you can use left: -9999px;position:absolute; it will still display the content for the search engine but it will be displayed somewhere not for the users.
http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}