Im trying to do this http://www.youtube.com/watch?v=dAUpiocVwMA where the content will cover an image when scrolling. The problem I'm having is that it is not a background image. It is an actual image tag. Here's what I have.
<section id="home" class="bgWrapper">
<img id="parallaxImg" class="bgImg" src="images/bg/bizlifter-design-bg.jpg">
<!--<div id="parallaxImg"></div>-->
<article id="signUp" class="areaMargin">
<h1>Business smart</h1>
<h3>One simple system for your business.</h3>
<div class="purple"></div>
<div id="signupRow">
<input type="text" placeholder=" name#company.com">
<a id="btn-start" class="btn btn-lg btn-primary btnWhite" href="#">Start</a>
<a id="btn-free" class="btn btn-lg btn-primary btnWhite" href="#">It's free!</a>
</div>
<p class="forwardSlash"><span class="purpleText">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</span></p>
<a class="btn btn-primary btn-lg googleBtn" href="#">Sign Up Using Google</a>
</article>
The image I'm trying to cover is on the second line with id="parallaxImg".
If you want to do it as shown in the video you can wrap your image into one div and wrap your content that is supposed to cover to image into another one. Having those two div's you can work with the CSS z-index. If you set the img-divs position to "fixed" it the text will be scroll to the top and the image will remain in its position.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
i have a div with href and background image also i have the button with onclick also , but when i tried to click the button it does not redirects the button link , where as it redirects the background href link.
<div class="banner-container">
<div class="banner-box">
<div class="banner-div">
<div class="bannerheading">
<p><span>The correct link should be </span></p>
</div>
<div style="text-align: test">
<button id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>
</div>
</div>
<a href="https://www.google.com/">
<div class="banner-img" style="background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
</div>
</a>
</div>
with out hcnaging hte HTML can anyone able to help https://jsfiddle.net/uqbhcdn6/2/ , how to redirect the button click ?
just add css pointer-events: fill; to the button...
<button style="pointer-events: fill;" id="ngwr40hslzejpruyuvx" onclick="window.open('https://stackoverflow.com/')" data-gahref="https://stackoverflow.com/" class="btn btn-primary btn-xs newtab">Learn more</button>
i edit your fiddle for your ease: https://jsfiddle.net/syamsoul/a8e1kng7/1/
Remove pointer-events:none for .banner-div class.
The above property doesn't react to pointer events, hence the click/hover events couldn't be performed
I'm trying to have the right column in Bootstrap 4 grid system fixed using position: fixed.
Here's a demo and it's code.
I want the button group on the right to stick to the viewport when I scroll the document. I have tried adding position: fixed; this doesn't work as intended - it causes the button group to overlay on top of the window like this.
I have already seen this answer on making columns fixed in Bootstrap, but the solutions won't work when the position of the columns is interchanged. Few of the solutions there will cause the right column to overlay on top of the left column in small screens, which is undesirable. In such cases, when viewed on small screens, I want the columns to be stacked (with the sticky feature disabled).
I prefer CSS solutions but if possible, I'd also like to know how it's done in JS.
Bootstrap 4 has the position-fixed class for this...
<div class="container">
<div class="row">
<div class="col-md-9">
..
</div>
<div class="col-md-3" align="center">
<div class="position-fixed">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
</div>
</div>
https://codeply.com/go/exOfOB2Igy
Place your buttons inside another div and then add a style of position: fixed to that div like so:
<div class="col-md-3" align="center" style="margin-bottom: 40px;/* position: fixed; */">
<div style="position: fixed;">
<button class="btn btn-success btn-custom">
<span>Button 1</span>
</button>
<br>
<button class="btn btn-warning btn-custom">
<span>Button 2</span>
</button>
<button class="btn btn-danger btn-custom">
<span>Button 3</span>
</button>
</div>
</div>
You can make the style a css class and make it show only on big screens
I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.
The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.
First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.
I think you are looking for this: http://isotope.metafizzy.co/
You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});
I have a page that requires two Rich Text Editors, so I went with WYSIWYG (What You See Is What You Get). They work fine, except for one little annoying detail. When I click the buttons to bold, italicize or indent, it applies to BOTH RTEs, and focuses on the second input. I can't quite figure out how to separate the toolbars from each other.
HTML:
<div class="form-group">
<label for="definition" class="col-lg-3 control-label">Definition:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##definition">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="definition"></div>
</div>
</div>
<div class="form-group">
<label for="consent" class="col-lg-3 control-label">Consent:</label>
<div class="col-lg-3">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="##consent">
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
</div>
<div id="consent"></div>
</div>
</div>
JS (not really needed, but just in case...)
$(function() {
$("#definition, #consent").wysiwyg();
})
After a while of research, the answer is quite simple. Read into the source code and you'll see that it has a toolbar selector:
toolbarSelector: '[data-role=editor-toolbar]',
So you have to override that with a unique data-role like so:
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );
Making sure to change the data-role to match the new selector.
Was going to just comment but it ran long.
If it's anything like my WYSIWYG editor, it's because the system is set up to work with one container. Even if you add 2 items, it will do the same to both. The only way you could get around this would be to create two separate pages and house them on the same page (via seamless Iframes, possibly AJAX).
Note that I don't know for sure how this particular editor works, but it looks like the backend works very similar (ie, those data- attributes are housing the related execCommand() arguments just as mine).
Haven't tried it but did you try separating the the WYSIWYG initialization.
$(function() {
$("#definition").wysiwyg();
$("#consent").wysiwyg();
})