I am trying to create a slide out menu to no avail. I want the text (home,users) to show up upon clicking the >> button. I have run out of ideas and I am sure I am missing something very obvious. Also, this is my first crack at animations in AngularJS.
http://plnkr.co/edit/Q8UF1mPCpTAVDn59D1wV?p=preview
First off, you haven't included angular-animate.js which is required for working with animations in Angular. Second, you're using the .ng-enter/.ng-leave classes which isn't used for ng-show. You should be using .ng-hide/.ng-show classes instead. There's an example at the bottom of this page that should get you going: http://docs.angularjs.org/api/ng/directive/ngShow
Related
I have custom css for my nav buttons. On pressing buttons the page ofcourse reloads and I can for a split second see the original btn colors. Worse if one of my buttons does a "target=_blank" then button that was selected prior to it remains on the original bootstrap colors..
Would appreciate insights how to fully override the css so I always get the custom colors
Regards
M.R.
Try to use grunt to generate inline css and that would solve the problem.
If you are unable to configure the grunt then add button styles in inline.
Based on your site link. Your request takes too long so the css is not there. Just have that css load when your page does. There is no reason to keep a 1kb file to be loaded on request, or any size at all. What is your reason to have this approach?
I have a weppart page I'm editing in SharePoint Web. I have an excel workbook display webpart in a column. The webpart has a summary toolbar for open in excel, download, and such. The toolbar has multiple buttons displayed to the user that I want to remove. Foe example, the first one is Edit in Excel.
I added a content editor for CSS and used
.cui-ctl-mdedium,
.cui-ctl-mdediumlabel
Display:None;
I've tried multiple classes, targeting just the webpart, using !important and such with no luck. Any thoughts?
Element/Class info
Are you sure you've written that selector correctly? The class name is actually .cui-ctl-mediumlabel ... you've written it with a "1". Not much to do in this case without code or anything to actually try it out. Have you tried solving your problem with your browser's dev tools adding rules?
I have a paid account with you and I tried recently to export a jssor slideshow in order to put it in a Drupal 7 block.
I exported it according to the different possible ways :
download standard code
download jquery code
download minimized code
and I have always the same problem : the left and right arrow do not work and each time I edit the code in the node copied from the html page inside the zipped file the following syntax is never present :
Finally I chose the minimized code as I found it was better in order to avoid conflicts with other active js scripts in Drupal.
I pasted the js script is in the Drupal template "html.tpl.php" and the slideshow works automatically with the autoplay function but when I click the left and right arrows, the slides do not change.
Could you tell me however how to display the arrows vertically centered and to make them turn the slides as they supposed to do when clicked ?
Is there a known bug with Drupal 7 or a special way to adapt the code to the CMS ?
Thanking you in advance,
Best regards,
Corinne
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework