i add toolbar at main view.for some reason i enable to paste code at StackOverflow code section.
look at image
2.onclick event at toolbar works with <a> tag but not work with <div> tag.
<a onclick="playButton()" class="link size-50" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
above code work fine.
<div id="myProgress" onclick="alert(11)">
<div id="myBar"></div>
</div>
on same page on click at div tag not working
Related
This link does work
<a ng-click="TermsAndConditionsModal('TermsAndConditionsHTML')">Terms and conditions</a>
But when render the same content from sitecore, link does not work and does not display any error in browser console
<a ng-click="TermsAndConditionsModal('TermsAndConditionsHTML')">Terms and conditions</a>
I am using the angularjs 1.6
Text in html template
<div class="col" i18n-content="sitecoreContent"></div>
I am working on a post-comments project. Using AJAX I am generating comments. Each generated comments has Like button. But new generated Like button doesn't work until I refresh the page. The generated link is shown below.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45"></div>
</div>
Output after refreshing the page.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45">
</div>
</div>
Output is almost same. But it doesn't work until I refresh the page. Could some one please provide me the solution for it.
For dynamic generated content you have to reapply the event after the content is loaded or, better, use event delegation to your likes button, something like that:
$(document).on("click", '.like-comment', function(event) {
//do your like stuff here
});
Event delegation works well with dynamic generated content and is the preferred way to handle this specific situation.
I am trying to make a responsive sticky navigation bar which will shorten when the screen gets too small (for mobile). The navigation bar works fine without the hamburger bars on my laptop, but i am struggling to implement the following code on W3C with my code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
the following is a link to jsfiddle with the HTML, CSS and Javascript code I am using.
HTML
https://jsfiddle.net/cpeotvsf/25/
below is my code
<body>
<div class="top-container">
<h1>testing header</h1>
<h3>Scroll down to see learn more.</h3>
</div>
<div class="header" id="myHeader">
<div class="navbar" id="Mynavbar">
Home
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Red or Black Tarmac Drives and Paths
Fencing and Gates
Shingle and Coloured Gravels
Drainage Work
Patios and Crazy Paving
Block Paved Driveways and Paths
Turfing and Artificial Grass
Brick and Purbeck Stone Walls
Decking and Rockeries
</div>
</div>
Gallary
Before and After
Testimonials
Contact Us
<a href="javascript:void(0);" class="icon" onclick="myFunctionn()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
The CSS and Javascript I am using are in the jsfiddle link above
Any help on this would be greatly appreciated
Your js is fine but jsFiddle keeps the script's load-type on load rather than at the bottom of the page so the onClick can't find the following function:
function myFunctionn() {
// place this script below your body content.
}
To make the above function run properly in jsFiddle, just click JavaScript + No-Library (pure JS) ▼ and change the load type to bottom of body then re-run the script.
jsFiddle with load type updated: https://jsfiddle.net/cpeotvsf/35/
Consider this code:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false">CLOSE</div>
</a>
</div>
</div>
</section>
I have an ng-click in the that element which changes the value of 'activeSection' to true. Inside of it, I have another button that can switch this back to it's initial value (false).
In the actual app, it would show or hide this child button based on a class added to the element,just to give you a little background what I'm trying to achieve.
When I click on the element, it does as I expect it to be: switch the value to 'true'. But when I click on the .back-button element with the other ng-click, it fails to register the changed value.
Why is that?
They're both inside the same controller, btw. If there's a solution that doesn't involve creating a new controller, it would be better.
If you click on your back button, activeSection will be false but then your event will be propagated to its parent so the ng-click of Section will be executed too and activeSection will be true again.
In order to make your code work, you should stop the propagation of the ng-click event after changing the value of your variable in your back-button.
Your code would look like this:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false; $event.stopPropagation();">CLOSE</div>
</a>
</div>
</div>
</section>
What you are doing wrong is that you are putting the close button inside the element which have already ng-click, that's why when you are clicking the close button, it executes the parent ng-click and stop propagation for all other click events happening simultaneously.
So, the possible solution is making another super parent of the elements and taking the close button out of the element which is making it visible when clicked and adding a ng-show directive to the close button.
Checkout the following snippet
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<section class="page-section about-us" scroll-bookmark="about-us" ng-init="activeSection=false">
<div ng-click="activeSection=true" class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
</a>
</div>
</div>
<div ng-show="activeSection" class="back-button" ng-click="activeSection=false">CLOSE</div>
</section>
</div>
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.