I've been creating a website thats organized mostly with display:flex. All the content is in one html and using JQ to show() and hide() the different content. Now I'm trying to create a "pop up" window using a div. I initially hide() the popup div. when I click the button(which is a flex item) nothing seems to happen. Its as if the properties of flex are pushing it out of the way. Here is a sample of why my code looks like. Does anybody have experience with this?
<div class="flex-container">
<div class="button"></div>
<div class="button"></div>
<div class="button-to-click"></div>
<div class="popUp"></div>
</div>
$(".popUp").hide();
$(".popUp").click(function () {
$("#wgl-welcome").fadeIn(500);
});
Here is an updated JSFiddle of what I'm trying to accomplish. Of coarse - works in the fiddle haha. Possible something out side the container is effecting it.
https://jsfiddle.net/ab3d/97bcnvnr/5/#&togetherjs=5lME62V5tt
Related
I'm trying to educate myself about Flickity. The carousel auto plays and the selected cell (denoted by the grey background) is automatically in the middle. I would like the selected cell not to be in the middle. I'm looking for a way to may it be the cell to the left, so it is above the dots (desktop view).
Hope that makes sense. Here is the jsfiddle for it.
The only method that I can think of is using jQuery to find the prev sibling for the "is-selected" class and adding a class to it, but I was hoping there may be a simpler method
Thanks in advance for your feedback!
<div class="carousel-outer-flick">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
add this
<Slider
options {{
cellAlign: 'left' //this part will shift your entire slide to left
}}>
...
I'm trying to develop an overwolf app and am having issues receiving mouseLeave events.
Overwolf App:
<div id="menu" onMouseDown="dragMove();">
<div id="close" onclick="closeWindow();"></div>
</div>
<iframe src="URL_to_Webpage"></iframe>
<div id="scale" onmousedown="dragResize('BottomLeft');"></div>
<div id="sliderBg">
<div id="slider"></div>
</div>
The menu, close, scale and slider elements are overlayed ("position: absolute; left:...") over the iframe and work as window control elements (scaling, closing,...)
Webpage (iframe content):
$('html').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
I always get the hover class applied to my iframe as expected. CSS :hover selectors get applied as well.
The mouseLeave event though is only triggered, when leaving the iframe without "touching" the overlayed window control elements.
So if I touch those elements on my way out with my mouse, the "hover" class isn't removed (event simply not triggered) and all things applied with a css ":hover" selector aren't removed either.
Any help would be appreciated
Try add 'id' name on the iframe and imstead of directly using html.
I would like to see how it works to fully picture what you want to do.
Could you please paste your code at http://jsbin.com and let me know the link?
My scenario is to achieve a section in web page looks like this:
I am okay to use image and I am okay to use css. But as I am working in Salesforce, it is quite hard to put images into css file or section which means I can't use css code like this:
.wStatusCompleted {
background: #DBFBD6 url(../img/wizardCompleted.png) 20px 16px no-repeat;
}
Everything else is fine but putting the url of image in the css will result in resource not found. So I am trying to achieve it via html way and here is what I tried:
<div style="float:left">
<img src="{!$Resource.wizardCompleted}"/>
</div>
<div>
<span style="font-size:18px;margin-bottom:20px;"> Completed</span>
<br />
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
I have tried a couple of things and this is the closest one but still not what I want. Any suggestions?
Edit
To answer the comment, the above html will result in an image as shown below:
You should be floating both of your divs not just the one wrapping the image:
<div style="float:left;">
<img src="http://www.placecage.com/50/50"/>
</div>
<div style="float:left;">
<span style="font-size:18px;margin-bottom:20px;"> Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Be sure to clear your floats using overflow:hidden or a clearfix on a parent element or (in the event that there is no parent) by adding an empty element set to clear:both. This appeared to be working but your second container was actually sitting behind the image because of the float:left
FIDDLE
To align the text in the middle just use display:inline-block instead of float:left and set vertical-align:middle; for both of them:
NEW FIDDLE
You can try also display:inline to make the img behave like a text element.
<img src="http://png.findicons.com/files/icons/985/affel/128/tick.png" style="display:inline-block;"/>
<div style="display:inline-block; vertical-align:top; margin-top:2em;">
<span style="font-size:18px;margin-bottom:20px;">Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Fiddle to play with
I have searched for several things, but i just couldnt find the answer. Maybe you could help me out.
I want to align div elements like on Pinterest. Not all divs are the same height, but the gutter width stays the same. I am designing something and i would like to program it as well.
Here is an image of what I mean, for clarification: http://nl.tinypic.com/r/ekkkte/8
Graphicburger.com uses the same thing I mean to do. I just want to know how one would align his content like that.
Well, one way to achieve this is by using Masonry. I think this is what Pinterest actually uses for their layout. This also happens to work jQuery, if you are using that as well. If you are looking for more on the theory behind this, check out this link
The following is the demo code from the Masonry plugin/library link:
HTML
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
CSS
.item { width: 25%; }
.item.w2 { width: 50%; }
Javascript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
i have answered a very similar post few days ago.. with sample code of html and css: How to create grid position elements like in this image css
mind to take a look?
I asked a similar question already, but I'm still having this problem.
The website I made has a bug on tablets. The different content sections don't display properly on tablets - things overlap. The Google Maps iframe, for instance, shows upon page load, not upon clicking on the corresponding radio button (label!). This only happens on tablets.
After some deep thinking, I found that the radio buttons are probably the culprit. On desktops everything looks A-OK.
Sorry, I can't make a JSfiddle to reproduce the tablet issue (help is explicitly sought only from those who can use dev tools, take a quick look and maybe point me to what needs to be done in order to make it work on tablets, in short only from real badass cross-browser Chucknorisses).
Help would be much, much appreciated!
UPDATE:
The radio-buttons I'm talking about are 'design-hidden' to only keep labels as visible / clickable elements.
The code looks like this (this would be the yellow 'home' button):
<div class="mx-button" id="real_button5">
<input type="radio" name="mx" id="button5" checked>
<label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label>
</div>
It seems that on tablets, these buttons are clickable (something happens), but they don't unhide the correct content. Things overlap.
As you are already using jQuery within your project I built a small example fiddle for you. Th concept behind it is the following:
All menu buttons have the class menubutton. This gives you the possibility to style the buttons but allows you additionally to use a jQuery selector on them. Further I gave each button a value attribute. This attribute represents the id of the content div which should be shown.
The content divs also have a common class content and an id correspondig to the vlaue attributes above.
<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>
<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
Now I use CSS to hide all content divs by default:
.content {
display:none;
}
The JavaScript part is also not that complicated. I add a click-function to each element with the class menubutton. This is done with a jQuery selector. Now all content divs are selected by $(".content") and I hide them with hide().
this.value is the value attribute of the button you clicked on and is used to show this specific content div.
$('.menubutton').click( function() {
$(".content").hide();
$("#" + this.value).show();
});
I hope this shows you some of the jQuery possibilities.
UPDATE
As you want to use divs instead of buttons I made some changes on the example you can see them in this fiddle.
I changed from buttons to divs and added an id to each content div like the following:
<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>
<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>
the id of content div matches the id of its navigation div plus a standard prefix. show_ in my example. The JS Code was updated to use the id, instead of the value property to find the desired content div:
$('.menubutton').click( function() {
$(".content").hide();
$("#show_" + this.id).show();
});
UPDATE II
To show one content div by default, you can add another css class to this div (see updated fiddle)
<div class="content default_content" id="show_content1">Content 1</div>
I added this corresponding class to the CSS file:
.default_content {
display:block;
}