I am building this project in jsfiddle. I have imported the bootstrap resources I saw other people use, but bootstrap is not applying. For example, the submit button looks as follows:
<input type="submit" class="btn btn-login" id="login-button">
But in practice, it is a standard html button. I also tried to create three columns across the top like so:
<div className="col-md-4">
<p>
fil
</p>
</div>
<div className="col-md-4">
<p>
fil
</p>
</div>
<div className="col-md-4">
<p>
fil
</p>
</div>
But they end up just stacking on each other, rather than filling out the column. I have bootstrap.min.css and bootstrap.min.js. Am I missing any resources? How can I get bootstrap to function in this fiddle?
The bootstrap CDN you linked in the External Resources on you JSfiddle is broken.
try use these ones
CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
JS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Related
I Try to find a solution for a client but i wont get out.
The problem is that i cant edit the HTML, so i try to get a work-around with Javascript
<!-- This section must be hide in CSS or something -->
<div class="coupon-container">
<input class="input-text" type="text" id="coupon_code" name="coupon_code" value="">
<div class="btn-apply">
<button type="button" title="Toepassen" class="button-coupon medium" onclick="discountForm.submit(false)" value="Toepassen"><span><span>Toepassen</span></span></button>
</div>
</div><!-- end of section Hiding CSS -->
</div>
This is the
HTML code and i want to add a
onclick="new_function();
OLD CODE
<div class="coupon-container">
NEW CODE
<div class="coupon-container" onclick="new_function();>
Is this possible? Keep in mind that i need a Javascript, so i cant edit the HTML directly from CMS.
I Hope you guys can help me out.
Kind regards
You can do this.
document.getElementsByClassName("coupon-container")[0].setAttribute("onclick", "new_function();");
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I used summernote package: summernote:summernote for my website and everything work well except the feature to insert image, videos and link won't work.
Example:
Click insert link button (image and videos are the same)
A popup appear to set the link.
Click anywhere on that popup, it disappeared.
Here are my code:
post_edit.html
<template name="postEdit">
<div class="ui segment">
<form class="ui form">
<h1 class="ui dividing header">Edit post</h1>
<div class="field">
<label>Title</label>
<input type="text" id="title" name="title" value="{{title}}">
</div>
<label>Content</label>
<div class="field" id="content" name="content">
{{{content}}}
</div>
<button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
<a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
<a class="ui button" href="{{pathFor 'postPage'}}"><i class="arrow left icon"></i> Back</a>
</form>
</div>
post_edit.js
Template.postEdit.onRendered(function(){
$(document).ready(function() {
$('#content').summernote({
height: 400,
maxHeight:800,
minHeight:250,
});
});
});
I ran into this issue myself when adding autoform-summernote to my project that already uses semantic-ui. The problem is that there's a conflict between Bootstrap's and Semantic UI's $.modal() method. See these links for code references:
Summernote modal init
Bootstrap's modal definition
Semantic UI's modal definition
Summernote expects the modal method to be Bootstrap's, but instead calls Semantic UI's modal method. Because of the differences between the implementations of the modal methods, the modal closes right away when you click anywhere in the window.
Without some low-level hacks, these two packages will conflict since Semantic UI's is available globally in your project on any $('object'). If you're not using Semantic UI's modal method anywhere else in your site, you could disable it, which will fix it in this case. However, that's not a solution that works for me. Instead, I'm looking into a solution to remove summernote, or at least its dependency on Boostrap.
Edit 1/13/2016
I ended up replacing summernote with a different editor, https://atmospherejs.com/gildaspk/autoform-medium. It gives me the functionality I need and doesn't have conflicting dependencies.
I'm looking for the easiest solution to create pagination for a JSP app without too much hassle. Is it even possible to create pagination on client-side with dynamic mysql content? Using JSP, I tried taglib which never worked... I found JSP pagination tutorials on opentutorials.com but... Nothing I could really wrap my head around quite easily... So far what I found over the web just don't quite work or other solutions like open tutorials are too bulky and required heavy coding... I'm looking for something light weight... I tried Displaytag but I do not want to use tables to display product listings. I prefer divs. I don't mind using javascript or jquery... I have no clue how to paginate my app... :/
I`m trying to paginate the category page below.
<div class="middle_container_category">
<div style="width:100%; text-align:center; font-size:large; margin-top:2%; margin-bottom:2%;"> ${selectedCategory.name} </div>
<hr class="horizontal_line" >
<div style="width:100%; ">
</div>
<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
<div id="product_container" class="lazyload">
<div class="product_img_container">
<div id="product_image"><a href="viewProduct?${product.id}">
<img class="img" alt="" src="${initParam.productGalleryImagePath}${product.id} (1).jpg" /></a></div>
</div>
<div class="product_name_container">
<div id="product_name"><a class="category_links" href="viewProduct?${product.id}">${product.name}</a></div>
</div>
<div class="product_price_container">
<div id="product_price">$${product.price}</div></div>
<div id="button_wrapper_category">
<div id="add_toList"><form id="wishlistForm" action="addToWishlist" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input id="submit_list" class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
</form></div>
<div id="add_toCart"><form id="cartForm" action="addToCart" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input id="submit_cart" class="submit" value="<fmt:message key='AddToCart'/>" type="submit">
</form></div>
</div>
</div>
</c:forEach>
</div>
I don't see anything wrong with using tables if you are going to use them to show tabulated data and not to style your web up (using them to align, etc).
A very simple and useful library is DataTables: https://www.datatables.net/.
It supports AJAX querying, pagination, filtering you can set any style you want and it is simple to use.
I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:
<li>
<div class = "new-student">
<img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
<!-- Block A -->
<div id="grid" class="ui-grid-a ui-mini">
<div class="ui-block-a ui-mini">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="name-student">Name</h2>
<p class="attendingtime-student">00:00</p>
</div>
</div>
<!-- Block B -->
<div class="ui-block-b">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="pickuptype-student">null</h2>
<p class="pickuptime-student">00:00</p>
</div>
</div>
</div>
<form>
<!-- Attending -->
<fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
<input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">1</label>
<input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
<label for="checkbox-h-2b">2</label>
<input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
<label for="checkbox-h-2c">3</label>
</fieldset>
</form>
</div>
However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:
I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).
Please help!
Regarding this:
I've tried calling ".checkboxradio.('refresh')" but it only results in
an error (saying I can't call that method on a component that has yet
to be initialized).
Usually when this kind of error occurs you need to do this:
$('#someId').checkboxradio.().checkboxradio.('refresh');
First call will initialize checkboxradio widget and second one will enhance its markup.
But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:
$('[type="checkbox"]').checkboxradio();
Without refresh parameter.
And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/
There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).
If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:
$('.ui-content').enhanceWithin();
Read more about it here.
There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.