I'm missing the option to add a title to each slide of the Elementor Pro Media Carousel Widget. I'm using the description of images within the overlay option, but I also need to have a title of each slide shown underneath within the carousel. A text input field each slide would be best, but if there's away to append the media's title with some script would be a way also. Does anyone have a solution for this? The image carousel has that option. I don't know why it's not included within the media carousel widget though..
Thanks in advance!
You can display the caption or title in the Overlay. And using CSS give the overlay transparent background and opacity=1 so the text is always visible. Something like this:
.elementor-carousel-image-overlay.e-overlay-animation-fade {
background-color: transparent;
bottom: 0px !important;
align-items: flex-end;
opacity: 1 !important;
font-weight: 500;
padding: 0;
padding-bottom: 3%;
}
If you need to add another field to an existing widget, the best approach is to do it by editing the widget code and add a new field.
Alternatively, you can look for another Media Carousel Widget that might have those fields already. Jet Elements has one: https://crocoblock.com/plugins/jetelements/ but there are probably others.
EDIT: If neither of those is an option, you can look at https://wordpress.org/plugins/unlimited-elements-for-elementor/. It might work for what you need.
Related
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
Is there a way to change the images that are in Fotorama when I click in a div?
For example, I have two divs, one called #NYPhotos and the other called #WAPhotos. When I click on div #NYPhotos, Fotorama appears below it, showing the photos I took in New York. After that, when I click on #WAPhotos, the images in fotorama are swapped to the photos of Washington.
I was able to make Fotorama appear with the NY photos, but had no luck trying to swap the images... Any ideas?
First, I would recommend reading the answer to this question which should help: How to change an image on click using CSS alone?
If you don't want to read that then basically the main idea is:
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
Just make each section a div using CSS. Hope this helped!
My question has three parts
Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )
Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150x150 dimension (This part is also done as second row in the example)
Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.
Example is in http://jsfiddle.net/JBnbG/32/
I cant change structure otherwise it wont work caption part work properly
I would appreciate if some can help to fix the issue with keeping the HTML structure intact
I guess my question is, are you loading the example html dynamically from youtube, or just the images?
If the html is yours, it's a simple styling adjustment.
I forked it on jsfiddle , I think this is what you mean.
Not quite sure what happened to the styling, but I set the image
id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"
or, another way is:
left:-25px; position:relative;
Which btw, all these styles should be declared as a class in you stylesheet.
If you're loading the html dynamically, I commented out the javascript that achieves the same thing.
Depending on what you're working with, if using php, you might want to get a script that will auto crop to the appropriate size. Timthumb.php is the most notable one, although there's a security issue that will never be fully bulletproof, although pretty solid as is.
Cheers!
Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/
Changes to be done in CSS:
.VideoContainer > span {
display: block;
}
.VideoContainer > span > img {
display: inline-block;
margin-left: -60px;
margin-top: -25px;
}
I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don't want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.
This effect is similar to the Twitter iOS app, when you are typing in the search bar.
$('#search').ajaxStart(function() {
// what do I put here?
});
Thank you for your help everyone! Much appreciated.
I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don't want the overlay div to always be present (but just hidden), you can add it on the fly instead:
$('#search').ajaxStart(function() {
$('#content').wrap('<div class="overlay" />');
});
(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)
Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar's suggestion), just unwrap it again with this:
$('#content').unwrap();
The rest is CSS.
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
}
Keep in mind... this may not in fact be the right CSS approach, depending on what's already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things... all conspire to make your overlay not cover only the content area. If you run into that trouble, it's a separate SO question though. ;-)
JSFiddle: http://jsfiddle.net/Ff5wV/
Is there an easy way to have an HTML <textarea> alternate its row colors
to improve editing?
I don't mind if the solution is pure CSS or if it requires JavaScript.
textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Found this on codepen. Working for me.
If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?
I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.
Additional Solution
However, it seems that using that method, the background doesn't scroll along with each line.
The best technique I can come up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.
Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.
What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.
You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser compatibility, but this should help set you on the right track and get you going.
Here is a link to an example I have created using the above method:
http://jsfiddle.net/HelloJoe/DmPLH/
CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
RESULT:
An example of making every other line in a textarea a different color by using CSS' nth-child syntax
SOURCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child