I have a file (jquerymenucss.js) in app/assets/javascripts. And I have a picture (arrow-down.gif) in app/assets/images. But this picture in not view on page!!! (view a empty picture).
How to correct write a path?
My js file:
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}
var jquerycssmenu={
fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
$targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
},
function(e){
$(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)
css file
.jquerycssmenu {
font: bold 12px Verdana;
padding-left: 30px; /*offset of tabs relative to browser left edge*/
}
.jquerycssmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jquerycssmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jquerycssmenu ul li a {
display: block;
padding: 5px 20px 10px 0;
margin-right: 3px; /*spacing between tabs*/
color: #aa9685;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.jquerycssmenu ul li a:hover {
color: #f00;
}
/*1st sub level menu*/
.jquerycssmenu ul li ul {
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid #973133;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li {
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul {
top: 0;
}
/* Sub level menu links style */
.jquerycssmenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
background: #761f20;
color: #ffffff;
padding: 8px 5px;
border-top-width: 0;
font-size: 11px;
}
.jquerycssmenu ul li ul li a:hover { /*sub menus hover style*/
background: #b14546;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass {
position: absolute;
top: 7px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 5px;
right: 5px;
}
If you're assigning the image path in JavaScript, for instance the src property of an img element, then the path will be relative to the document (not the script you're running it in). The path is relative to the document's URL as the client sees it.
(This is different from CSS, where the path is relative to the URL the client sees for the CSS file, not the document the CSS file is used in.)
So for instance:
If the client (browser) sees the document at http://www.example.com/foo/document.html, and your code is included (from anywhere) in that document, and the actual URL the image is served on is (guessing) http://www.example.com/assets/images/down-arrow.gif, then you'd need ../assets/images/down-arrow.gif or /assets/images/down-arrow.gif.
If the client sees the document at http://example.com/doc.html and the image is on http://example.com/app/assets/images/down-arrow.gif, then the relative path is app/assets/images/down-arrow.gif (or /app/assets/images/down-arrow.gif).
If you're dead set on just having all your plugin in one (JS) file and not use an extra CSS file you should use absolute URLs. Since you'll probably be including your plugin in all forms of pages (foo/, bar/this, there/is/only/zuul). Compare T.J. Crowder's answer. From the CSS file you can use relative URLs, relative to the CSS file.
Related
I tried to develop one submenu under "Share registry operations" named as "Insider...". But I am getting only partial submenu getting displayed.
URL: http://sampledemos.online/gnsa/
I tried with the below CSS codings.
.menulist ul ul li a {
height: 30px;
line-height: 30px;
border-bottom: solid 1px #90d4e9;
font-size: 12px;
display: block;
width: 170px;
float: left;
margin-left: -23px;
}
I'm trying to create a submenu named "Insider..." under "share registry operations.
Try this code..
css
.menulist ul ul {
left: 227px;
clip: inherit !important;
opacity: 1 !important;
}
Add below to your CSS. Your javascript sets a bad clip path, probably due to negative margins. You might want to look closer into that aswell.
#listMenu-id-2 {
clip: inherit!important;
}
I was trying to create following scroll navigation with ionic, but somehow navigation is not working and style is not quite right. Could anyone help/guide me on what to use?
This is want I want:
This is what I have so far, horizontal scroll-able list, but above is more like navigation bar, item moves to center when you touch/select it.
When first element is active left side of the list should stay empty. They should scroll like navigation.
So far I have horizontal list but scrolling active one to center is not working.
<ion-scroll direction="x" class="wide-as-needed">
<div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
{{type|uppercase}}
</div>
</ion-scroll>
directive is simple anchor navigation and trying to navigate to element itself so far not luck, it will navigate to itself but only makes it visible not center of navigation list: https://docs.angularjs.org/api/ng/service/$anchorScroll
Also this angular $anchorScroll is designed to vertical scrolling not horizontal...
TabbedSlideBox can also be used, but this plugin also doesn't have tab scroll to center when active
Update for future reference I will leave it here.
You can try to use this
http://demo.jankuri.com/ngSlimscroll/
but for me creating custom directive from this helped.
function center() {
var currentElement = document.getElementById("active");
currentElement.className = "center-menu";
var nav = document.getElementById("nav");
var navWidth = document.getElementById("nav2").offsetWidth;
var margin = 0;
for(var i =0; i<nav.children.length; i++){
if(currentElement == nav.children[i]){
console.log(nav.children[i]);
break;
}else {
margin += nav.children[i].offsetWidth;
}
}
nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}
css
nav {
background: #9df0e8;
overflow: hidden;
border-bottom: 8px solid #40b5a2;
border-top: 2px solid #40b5a2;
width: 80%;
margin: 0 auto;
}
nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }
nav ul li { float: left; }
nav ul li a,
nav ul li span {
display: block;
background: #9df0e8;
color: #345661;
text-decoration: none;
padding: 1em;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }
.arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #9df0e8 transparent transparent transparent;
display: none;
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.center-menu .arrow{display: block;}
I need to finish javascript for load html page into div. I want load page1,page2 and so on into div id="content". If someone help me I will grateful. Thanks
Here is jsfiddle of this code
HTML
<div id="menu">
<nav>
<ul>
<li ><a class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a href="2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}
#content {
position: relative;
float: center;
width: 770px;
height: 670px;
clear:both;
margin: 0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}
JAVASCRIPT
$(document).ready(function(){
$('nav ul li a').click(function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Assuming your href reference the file with the contents that you want to show, you can use .load(). You can get the href property using .prop().
Prevent the default action (redirecting to a new page) when your anchors are clicked.
You may also want to trigger the this functionality on page load for the .active nav button. I've added a filter and a click trigger afterwards for this reason.
$(document).ready(function () {
var $navAnchors = $('nav ul li a');
$navAnchors.click(function (e) {
var $this = $(this);
e.preventDefault();
$navAnchors.removeClass('active');
$this.addClass('active');
$('#content').load($this.prop('href'));
}).filter('.active').click();
});
Notice I've assigned your matching jQuery collection to a variable, to save you making repeat selections. This way nav ul li a is only searched for once, on DOM load.
Use $.get.
$(document).ready(function(){
$('nav ul li a').click(function(e){ // when a nav link ('a' tag) is clicked...
$('nav ul li a').removeClass('active'); // remove the css class "active" from any nav links.
$(this).addClass('active'); // add the css class "active" to the one we clicked
e.preventDefault(); // <-- important! // prevent the page from navigating away
var page = this.href; // get the url the link would normally go to
$.get( page, function( data ) { // in the background, get the content of the page for the link we have clicked
$( "#content" ).html( data ); // load the content we have into the element with id "content"
});
});
});
If you're saying that the page is empty when you first load it, that's expected. If you want it to load something, you'll need to manually fire off the click event when the page loads.. something like:
$('nav ul li a.active').click(); // Get the nav link which has class "active", and fire the click() event.
... should do the trick.
Note -- fiddle won't work, as it doesn't support AJAX stuff very well.
Second Note - George's answer is a simpler version of this. Use that. :)
I have many unordered lists of 5 li in each like
<ul class="Rank">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want to change background-color of current li:hover element and all previous li elements in that list. Suppose, if I hover over 3rd li then 3rd, 2nd and 1st li should have background-color:#00f;
I can do it in jQuery or JavaScript, but I want it in pure CSS. Currently following this article: http://css-tricks.com/useful-nth-child-recipies/
I can change background of currently hovered li element with this .Rank li:hover but cannot understand how can I change background-color of the previous elements of that current .Rank list.
From above article I also learnt to change background until nth-chid but cannot figure out how to apply :hover on it.
.Rank li:nth-child(-n+5)
{
background-color:#00f;
}
http://jsfiddle.net/coma/PLBYG/2/
or
http://jsfiddle.net/coma/PLBYG/3/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
}
ul.rank > li {
position: relative;
margin: 0;
height: 30px;
background: #ccc;
transition: background-color 350ms;
}
ul.rank:hover > li {
background-color: #00f;
}
ul.rank > li + li {
margin-top: 10px;
}
ul.rank > li:hover ~ li {
background: #ccc;
}
ul.rank > li + li:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
or!!!
http://jsfiddle.net/coma/PLBYG/4/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
Posting my answer for reference (to those who come viewing this later like I did).
Here is a solution that doesn't use :before or :after.
http://jsfiddle.net/nLCZK/
It uses float: right for all the lis, and you also have to put the lis in opposite order you want them to appear.
I'm making this website:
http://frankkluytmans.nl/testsite/
And making a list view in which i'm using the wookmark jquery plugin to make the list items align proper vertically. Now the list items are collapsing vertically (see link). What can I do to solve this?
CSS:
#content ol {
position: relative;
display: block;
margin-left: -2%;
list-style-type: none;
}
#content ol li {
display: block;
width: 18%;
height: auto;
margin-left: 2%;
margin-bottom: 20px;
padding: 3px;
background: white;
float: left;
}
#content ol li img {
width: 100%;
border: none;
}
JS:
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 20
});
I was able to work out a solution on my own. Turns out webkit browsers need the images to be loaded first to be able to calculate the correct height for the list elements.
I tweaked my JS to this:
$("img").load(function() {
$('#content ol li').wookmark({
container: $('#content ol'),
offset: 15
});
});