I have a DNN skin that has some nice containers. I can drop an HTML module onto the page and apply the container to it. I can put a link in the content of the HTML Module, but what I would really like to do is make the whole container/module area a link to another page - in effect as if it were a great big button. How do I do this?
Of course as soon as I posted the question I found a way, but would still be interested to know if this is the "right" way or even a "good" way.
My solution was to take a copy of the container .ascx and add an "onlick" to the outer DIV, which in turn uses JQuery to locate the first tag and to navigate to the href.
<div class="Container-1 Container-1-color1"
onclick="window.location.href = $('a:first',this).attr('href')">
Note: Use window.location.href, not JQuery .click() or .trigger('click') as this creates an infinite loop.
I then added some CSS to show that an action was available when the mouse was over the container:
.Container-1:hover
{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
border:1px solid gray;
}
Related
I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>
What if we use ng-cloak, but the angular script is loading slowly, or if the user has turned off JavaScript, then wouldn't the user still see {{ a + b }} or anything we wanted to hide?
Would it be a good practice then, if we add
<style>
[ng-cloak] { display: none !important }
</style>
to our HTML file's header section? Or would there be other CSS style that might be appropriate to add if we are using AngularJS and the Internet connection might be slow or if the user has turned off JavaScript?
If you are loading angular.js in the head section of your page, then you should not have to add any css yourself for ng-cloak to work properly. Angular adds these styles itself when it loads, and since this happens in the head section, these styles are applied before the browser evaluates the body of your page and renders any content.
However, if you are loading angular asynchronously with a script loader, then you do need to add the styles manually (preferably in a stylesheet or style block loaded in the head of your page).
From the docs:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I'm not totally sure I understand the question, but yes, I believe what you are saying makes sense.
ng-cloak is a bit different from other directives, because its only job is to remove itself. Angular does not apply any special styling to that attribute. It just removes it.
That means, for example, you could apply styling to make unloaded Angular elements have a background color, instead of being invisible. I don't know why you'd do that, but that's something to remember--it's just a boring old attribute until Angular removes it.
Behavior of loading CSS files is up to the browser, so it's probably fair to put a style tag in the head, but that's just like any other CSS resources--you rarely want elements loading without styles, and browsers are pretty good about avoiding that. I often like to put it in the head just for good measure, but I can understand someone not wanting to do that. But you definitely need it somewhere.
If you have JavaScript disabled, or before Angular loads, it's just like any other attribute:
[ng-cloak]{
display: none
}
<div ng-cloak>
Where am I?
</div>
But once Angular loads (no matter how long it takes to set up, simulated here by a one-second timer):
window.setTimeout(function() {
$("[ng-cloak]").removeAttr("ng-cloak");
}, 1000);
[ng-cloak] {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-cloak>
Here I am!
</div>
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}
I'm creating a custom theme (as a n00b). Basically, I display content on the main page as small div blocks.
my node.tpl.php looks something like this:
<div class="content-block">
default node.tpl.php stuff here
</div>
This works OK on the front page. However, when I click "Read More," to take me to the full article page, /node/[nodeId], obviously, it still shows as the little CSS content-block div.
I'd like to show the full article using a different CSS class. What's the best way to do this?
Yes, there are some best ways to accomplish that.
First of all I am not sure, whether you are using separate front page tpl or not. If not then please try to use page--front.tpl.php. Where you can provide your desired format to create the proper front page. Why this is needed, cause you won't need to modify the node.tpl.php file. So inside this front tpl file you can put your desired code.
<div class="content-block">
default node.tpl.php stuff here
</div>
Also you can use the Panel module to create a front page. So you won't be needed to modify the nope tpl file. Always try to avoid modifying tpl file. Panel module makes it easier.
Secondly, you should not touch the node.tpl.php file. Once you will modify the file, you won't be able to re-define as default. So keep that as it is and revert back it to the default file. Now if you send some article link, it won't break.
So this is it. If this helps you, then please like :)
Keep Drupalizing :)
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?
One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.
You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:
data-ur-set="toggler"
(add this attribute to the wrapper)
data-ur-toggler-component="button"
(add this attribute to the "button" section)
data-ur-toggler-component="content"
(add this attribute to the content section)
You need to include these CSS rules somewhere too:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.