I'm working on a Joomla 2.5 based website.
i have a submenu with a title (the title is the name of the topmenu category) on top. This title has a background color. Now I want to have a different background color (of the title) on every page that I open.
I thought about creating a extra menu module for every menu item with a specific color defined in the css, but than I have to rename every module because I must not have the same name twice. But I need the title to be the same as the Topmenu category for all the submenu items.
here is the basic structure of the generated code:
<body>
<div id="content">
<div id="breadcrumbs"></div>
<div id="main" class="centerAndRight"></div>
<div id="right">
<div class="moduletable_servicemenu">
<h3>HERE IS THE TITLE</h3>
<ul class="menu"></ul>
</div>
<div class="moduletable_kontaktmodul"></div>
</div>
</div>
<!-- end content -->
<div id="overallfooter"></div>
</body>
Could anybody help me with an idea, please.
Thanx in advance.
If you place a class on that title (e.g. class="title"), and then place a different class on the body tag of each page (e.g. <body class="contact">) you can easily style the title differently on each page, such as:
.contact .title {background: red}
.about .title {background: blue}
I wrote this script for random images, it can be edited to apply towards your desire which is random colors. Its fairly simple and again you can do as many colors as you want, and the program will randomize them.
$(document).ready(function() {
var colors = ['#ccc', '#dedede', '#333', '#555' /***keep adding as many colors***/];
$(".Topcategory").each(function(){
$(this).css({'background' : ' + colors[Math.floor(Math.random() * colors.length)] + ')'})
});
});
Related
I want to change the background color of a couple of divs based on the choosen color from a colorpicker.
I have tried it using this:
<div ng-style="[id^='color']{background-color: '{{rgbPicker.color}} !important}'">
<div bind-html-compile="body">
<div id="color1"></div>
<div id="color2"></div>
<div id="color3"></div>
<div id="color4"></div>
</div>
</div>
I have the right color code in rgbPicker.color (hex code), but the color is not changing. How can I make this work?
Do you really need / want to go through the ngStyle directive, when all you want is to set a background color? Here is a dead simple example using the default <input> color picker which updates the <body> background in a $watch :
<input type="color" ng-model="color">
$scope.color = '#ffffff'
var body = document.querySelector('body');
$scope.$watch('color', function(newVal) {
body.style.backgroundColor = newVal
})
http://plnkr.co/edit/jdWdaqejBLb1hjXF680f?p=preview
You can replace <body> with any querySelectable' element.
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
Hello MarionetteJS Gurus,
I have what is probably a very simple problem, but I can't wrap my head around how to solve it. I have an application with 2 regions and 1 layout, and I'm utilizing the Ratchet CSS library for prototyping. Functionally, the goal is simple: display a list of contacts in one view, with a header and search bar. If the user selects a contact, remove the search bar and retain only the header.
The problem appears to be the wrapping divs that are required to swap views in and out. The Ratchet CSS needs the header bars to be directly above the content section in order to properly dock them at the top of the viewport, but Marionette's regions and layouts (at least with my configuration) are preventing this from happening. Perhaps I could better structure my views?
JSFiddle of the resulting output: http://jsfiddle.net/VB7py/3/ You'll notice that the header/search area overlaps the content area.
menuRegion contains a footer menu, and mainRegion contains a layout consisting of a header region, a search region, and a "main content" region. Below are some snippets of my code:
Regions
var App = new Marionette.Application();
App.addRegions({
headerRegion: "#header-region",
menuRegion: "#menu-region",
mainRegion: {
selector: "#main-region",
regionType: MainRegion
}
});
Layouts/Views
List.Layout = Marionette.Layout.extend({
template: "#contacts-layout",
regions: {
headerRegion: "#header-region",
searchRegion: "#secondary-header-region",
contactsRegion: "#contacts-region"
}
});
List.Search = Marionette.ItemView.extend({
tagName: "div",
template: "#contact-list-search",
className: "bar bar-standard bar-header-secondary"
});
List.Header = Marionette.ItemView.extend({
template: "#contact-list-header"
});
Templates
<!-- Application Layout -->
<script type="text/template" id="contacts-layout">
<div id="header-region" class="bar bar-standard"></div>
<div id="secondary-header-region">
</div>
<div id="contacts-region" class="content"></div>
</script>
<script type="text/template" id="contact-list-header">
<nav class="bar bar-standard"><h1 class="title">Contacts</h1></na>
</script>
<script type="text/template" id="contact-list-search">
<input type="search" placeholder="Search" />
</script>
<script type="text/template" id="menu-template">
<nav class="bar bar-tab bar-footer">
</nav>
</script>
The wrapping divs inside the regions did not seem to be a problem. However, you need to set those bar specific css classes to the regions instead of it's nested elements. Like:
<div id="header-region" class="bar bar-standard">
<div>
<nav>
<h1 class="title">All Contacts</h1>
</nav>
</div>
</div>
<div id="secondary-header-region" class="bar bar-header-secondary">
<div>
<input type="search" placeholder="Search">
</div>
</div>
See: http://jsfiddle.net/Cardiff/7Wd6W/
You could pre-set those classes on your region elements or add these specific classes on region initialization, see: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#instantiate-your-own-region
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}
Im having such a problem, I have a menu that has some hidden sub content. That when the user clicks the nav button some hidden content will appear. That part is fine and all working.
What I need to know is when I have one nav item showing it's hidden content. If the user clicks on the next nav item. I would like the other hidden content to disappear and the new hidden content to appear.
My inspiration comes from this website. http://www.o2.co.uk/ if you click on the nav arrow items. Any help on this would be great. By the way all the Show and Hide effects are all working.
Thanks Anyone who can help..
I'm assuming you're doing this in javascript. Pardon me if I'm being too elementary here.
Your function (if you can post it, that would be helpful) needs to not only change the display attribute of the element you clicked, but also change it to display:none; for any others.
So when you click on the nav item, your javascript changes the display attribute for that list to :block or whatever, and ALSO changes all the other lists to display:none. That's a little brute-force, so you could also just change whatever other ones are currently something other than :none to :none.
You'll need jQuery for this but...
first we tie a onClick function to each element with the class 'link'
we tell that onClick that on a click, HIDE all elements with the class 'hidable' and then show the div with the ID of the rel attribute value in THIS link.
http://api.fatherstorm.com/test/4159899.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script>
$(document).ready(function() {
$('.link').each(function(){
$(this).click(function(){
$('.hidable').hide();
$($(this).attr('rel')).show();
});
});
});
</script>
<ul>
<li class='link' rel='#div1'>l1</li>
<li class='link' rel='#div2'>l2</li>
<li class='link' rel='#div3'>l3</li>
<li class='link' rel='#div4'>l4</li>
<li class='link' rel='#div5'>l5</li>
</ul>
for the code block
<div class='hidable' id='div1'>div 1</div>
<div class='hidable' id='div2'>div 2</div>
<div class='hidable' id='div3'>div 3</div>
<div class='hidable' id='div4'>div 4</div>
<div class='hidable' id='div5'>div 5</div>