Check width element by JS - javascript

I'm working on menu dropdown by HTML and CSS. I have a issue with checking sub-menu's width.
I have a menu like this
When we point to the element, it will show the dropdown menu like this or like this
The sub-menu is a dynamic menu. It has same style, same css name, but depends on data so that sub menu can be small or large.
So I would like to check the sub-menu width, if any sub-menu(s) have width larger than 200px -> add one more css class in sub-menu (the others < 200px, must not be added)
My idea is using JS for checking sub-menu element's width. But I'm a newbie on it. I tried with
<script>
if ($('.sub-dropdown').width() > 200) {
$('.sub-dropdown').addClass('float-right');
}
</script>
But of course, it added to all sub-menu, even they are less than 200px :(
Can anyone have the experience with this issue? Please give me an solution on that.
Many thanks.

I'll tell you why your all sub-dropdown will have class float-rigth.
Only if your one sub-dropdown box's width is bigger then 200, your if judgment will be true ,so the code come in to $('.sub-dropdown').addClass('float-right');.this code will add all your box's with class float-right which box's class is sub-dropdown.
You should change your code like this
$('.sub-dropdown').each(function(index,ele){
if($(ele).width()>200){
$(ele).addClass('float-right');
}
});

Related

How can I make a slider like in the image? Scrollable and with text and images

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v
I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :

Hide part view text in overflow hidden

I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/

Slide Over Menu combined with Bootstrap

I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Programmatically determining how many element to display in a web navigation bar

Lets say I have a horizontal navigation bar that can have an arbitrary number of items in it. Now let say this page has a width of 1000px and all the items if displayed would be 1300px. Now what I would want to do is to take whatever elements are causing it to extend beyond the 1000px and put them into a drop down menu. The issue I am having is what is the best way to figure out how many element I would need to take to make sure everything fits in the window when the window width can be changed (if the user changes the window width, the number of elements in the drop down would increase or decrease) and the navigation element widths are random?
Something similar to google plus's side navigation, just horizontal instead fo vertical.
Put the navigation elements in a parent div whose overflow is set to hidden so the extra nav elements are hidden.
Then, find the items that are hidden using jquery and append them to your dropdown menu. See answer to this question: jQuery: How to get content not visible with overflow: hidden?
See my working example: http://jsfiddle.net/zSXTb. The basics:
var h = $("#container").height();
$("#container").find("div").each(function() {
if ($(this).position().top > h) {
$(this).clone().appendTo($("#extrasContent"));
}
});
Run this onload and when the window is resized.
Try using #media queries with the css - you get a lot of control regarding screen size. For example:
#media all and (max-width: 1000px){
/*insert normal css. e.g.:*/
body{
width: 700px;
}
}
You can use min-width instead of max-width.

Using jqTransform on hidden contact form, select box value not showing

Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.
The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.

Categories