What I want to do is, to create a button and this button is pressed, it will change the theme color on my jQuery mobile test site.
So say that my html parent div looks like this
<div id="firstPage" data-role="page">
I want it so that on click, that it appends data-theme="theme letter here"
to the div so that it ends up like this <div id="firstPage" data-role="page" data-theme="theme letter here">
OR
If I start the div like this <div id="firstPage" data-role="page" data-theme="theme letter here"> That on the buttons click, that it changes that data-theme attribute to another letter
so something for example, like this
$('#themeBtn').click(function(){
$('#firstPage').setAttribute("data-role","ANOTHER theme letter");
});
or
$('#themeBtn').click(function(){
$('#firstPage').append("data-role","a");
});
or something like this. How can I properly go about this?
Thanks in advanced.
EDIT* based on the responses, ive tried**
/////////////TESTING THEME BUTTON (check STACK OVERFLOW for answer)
$('#themeBtn').click(function(){
//$('#firstPage').jqmData("role","a");
//$('#firstPage').attr("data-theme","a");
//$('#firstPage').jqmData("theme","a");
$('#firstPage').data('theme','a');
});
To make sure that the button is firing off, i commented all those lines out and did a simple
$('#themeBtn').click(function(){
alert("foo");
});
and sure enough it fired the alert on button click so im positive its working.(the button i mean).
I added a jsFiddle so you can see it in action(of not working lol)
http://jsfiddle.net/somdow/yRmKd/1/
if you un-comment the alert, itll fire off, when you uncomment the other lines(based on responses) it doesn't update.
Just use: $('#firstPage').data('theme', 'ANOTHER theme letter');
You can do something like this to set the attribute:
$('#themeBtn').on('click', function() {
$('#firstPage').attr("data-theme", "new Theme");
});
You can use jqmData method:
$('#firstPage').jqmData('role', 'a');
docs
When working with jQuery Mobile, jqmData and jqmRemoveData should be
used in place of jQuery core's data and removeData methods (note that
this includes $.fn.data, $.fn.removeData, and the $.data,
$.removeData, and $.hasData utilities), as they automatically
incorporate getting and setting of namespaced data attributes (even if
no namespace is currently in use).
have you tried?
$('#themeBtn').click(function(){
$('#firstPage').attr("data-role","ANOTHER theme letter");
});
This should update the data-role
Related
What I am trying to do:
I have mutiple anchor links within text, each of which refers to and connects to a specific image (on the same page).
After the user views that image, I would like them to hit a 'Back' button, which will bring them back to the text where they clicked on the link, to continue reading from where they left off.
(I have created the button in the html, with an 'id' of 'backButton').
Note: I am new to JS and jQuery, and perhaps my inability to find a plugin or explanation of how to do this has something to do with a failure to do a search with a clear and concise explanation in a search box.
(It seems to me that this would be a fairly commonly used feature)
This is where I currently stand with my attempts to use jquery for this:
$(function(){
$('a').click(function(){
$(this).attr('id', 'backToLink').addClass('que');
$('#backButton').attr('href', '#backToLink');
});
});
(I will try to explain my reason for why I did each step so that someone might tell me why it is wrong):
$('a').click(function(){
For each anchor, when it is clicked on, do this function,
$(this)
Refer to the anchor link that was clicked,
.attr('id', 'backLink')
Give this anchor the 'id' of backToLink,
.addClass('que');
Add the class of que, which is set in my CSS file to give padding-top so that the text will be visible below the fixed-position header,
$('#backButton').attr('href', '#backToLink');
Set the #backButton href to go back to the original link in the text, which should now be #backToLink.
Note: I suspect it will be necessary to turn off that id of #backToLink after it is used,
so that the next time it is used it will not conflict with the first.
I think the issue here is if you want to use anchor navigation then you dont need to use html button. Just simply use anchors. Here is a simple example of what you want to achieve. You can add in logic to make it dynamic according to your needs or keep it like this with adding the number of links manually. Hope this helps.
P.S. css classes are used just to add spacing to demonstrate the scrolling.
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function() {
scrollToAnchor($(this).attr('href').slice(1));
});
#container{
height:2800px;
}
#block1{
background-color:black;
width:100px;
height:100px;
margin-top:1000px;
display:inline-block;
}
#block2{
background-color:black;
width:100px;
height:100px;
margin-top:600px;
display:inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">
Link to Block 1
<br><br>
Link to Block 2
<br>
<div id="block1"></div>
Back to Link 1
<br>
<div id="block2"></div>
Back to Link 2
</div>
I have a div with output content that sometimes outputs links.
But when this output div has the contentEditable attribute set to true if makes the links unclickable.
What's odd is you can still hover over it and before trying to click it it still looks and behaves like a link. (Blue in color, underlined, hover changes the color of blue, etc.)
But when you go to click it it doesn't take you to the link. I can right click and say open or open in a new window and it works fine.
Is there a way to make it clickable again so the user doesn't have to right click it all the time?
<div contentEditable='true'>
Some content with link: <a href='https://google.com' target='_blank'>Google</a>
</div>
Here is a JSFiddle example: https://jsfiddle.net/ce13w610/
I still need the content to remain editable, but it would be nice to have the links working intuitively again.
Edit: put additional solution as an answer, not an edit. :)
you have to make the link uneditable:
<div class='content-output' contentEditable='true'>
My content and link here: <a contentEditable='false' href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>Some video</a>
</div>
https://jsfiddle.net/ce13w610/1/
Here's an another one may be overkill though:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" contentEditable="true">
Click Me!
</div>
<script>
$('#content a').mouseenter(function() {
console.log("Works");
$('#content').attr("contentEditable", "false");
});
$('#content a').mouseleave(function() {
$('#content').attr("contentEditable", "true");
});
</script>
https://jsfiddle.net/9dk4sgkk/
Additional solution:
I went and used jQuery to make all tags in the output div to have the attribute contentEditable = false.
$("#content-output a[href]").attr('contentEditable', 'false');
I build a code here.. that when he\she posts a comment the JavaScript will slide down a new comment block...
But i need to refresh after click the post button - then - there will be a new comment block under a post.
This is my code:
<script language="javascript" type="text/javascript">
//Sending the jquery comment
function SendComment(blab_id) {
var comment_txt = $("#Comment"+blab_id).val()
if(comment_txt == ""){
alert("Please Enter a Comment!");
}else{
$.post("scripts/send_comment.php", {Comment: comment_txt, bid: blab_id} ,function(data){
$("#new_comment"+blab_id).html(data);
$("#new_comment"+blab_id).slideDown(300);
$("#Comment"+blab_id).val("");
});
}
}
</script>
assuming your script works fine, except that u need to refresh page every time...
why cant you automatically refresh that particular div without loading overall page like this...
$('#Comment"+blab_id).load('yourpage.php');
What is "#Comment"+blab_id ? If that is just an input field, what is blab_id?
I think what you want is something like http://jqueryui.com/demos/dialog/#modal-form , but instead of a table a bunch of divs. I would have one div id=comments that contains all the comments, then you should be able to add more comments to the bottom of this. So instead of
$("#new_comment"+blab_id).html(data);
$("#new_comment"+blab_id).slideDown(300);
you would have $("comments").append(data).fadeIn(); (According to this) (Or prepend if you want the comment to appear at the top) (I haven't checked if this works though...)
where I assume data is
<div style="background-color:#f0f9fe";border-bottom:1px dashed #3A69B6; padding:5px; width:auto;">
<strong>'.$comment_user.' </strong>
<br/>'.$comment_txt.' <br/> ·'.$whenComment.'·
</div>
which is returned from scripts/send_comment.php
I have the following code that allows me to implement the shareThis functionality. What I am trying to do is when a the close button of the share this overlay is clicked I trying to remove the shareThis functionality that comes with the .share-span and then re-initialise it, however remove() does not seem to remove .span-share from the DOM.
<script type="text/javascript">
function getShareData() {
jQuery(".suit-gallery-btn").each(function(index){
jQuery(this).children().remove('span');
jQuery(this).append("<span class='share-span'></span>"); // ShareThis button will be inserted in this span, which we are appending to each <div class="suit-gallery-btn">
var suitLink = jQuery(this).find('a'); // the "click more information" link. you will need the href and title from this element.
console.log(suitLink);
stWidget.addEntry({
"service":"email",
"element": jQuery(this).find('.share-span')[0],
"title":suitLink.attr('title'),
"type":"large",
"text":suitLink.attr('title'),
"image": suitLink.attr('href'),
"summary":suitLink.attr('title'),
"onhover": false
});
});
}
jQuery(document).ready(function() {
getShareData();
jQuery("#closeX, #greyScreen, .stCloseNew2, .close, .close2").live("click", function(){
getShareData();
});
});
<div id="suit-gallery">
<img src="../images/galleries/business/DSC_0055_sm.jpg" alt="Stylish button 3 business suit, beige lightweight high twist cool wool Holland & Sherry" width="164" height="247" />
<div class="suit-gallery-btn">
Click for more information
</div>
</div>
change this line:
jQuery(this).children().remove('span');
to:
jQuery(this).children('span.share-span').remove();
See this in action here: http://jsfiddle.net/MarkSchultheiss/CUrXF/ where I slightly changed it to show the original span, then the removing when the function is called.
You've misunderstood the semantics of remove.
You call remove on the object that needs to be removed, not off the parent object you want to remove it from.
Something like:
jQuery('span.share-span', jQuery(this)).remove();
From what I can see, there is no span in the original code.
It looks like you are trying to remove() the span before you have appended it?
Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)
Here's my current code / markup:
Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that)
link.ParentNode.addclass("activebutton");
HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)
As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.
You seem to be using jQuery.
Here's an ugly way to do it; but it works:
Button Text
And your JavaScript:
function changeFrame(link) {
$('#first iframe').attr("src", $(link).attr('href'));
$('#second iframe').attr("src", $(link).attr('secondary-href'));
return false;
}
Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:
<script type="text/javascript">
$(function() {
$("a.iframe-link").click(function(event) {
$("#first iframe").attr("src", $(link).attr("href"));
$("#second iframe").attr("src", $(link).attr("secondary-href"));
// Whatever used to be the activebutton, make it 'waitingbutton', and remove
// the 'activebutton' class.
$(".activebutton").
addClass("waitingbutton").
removeClass("activebutton");
// Remove .waitingbutton from this, add .activebutton.
$(this).removeClass("waitingbutton").addClass("activebutton");
// Don't allow the link's default action (to follow the href in the normal
// way).
event.preventDefault();
});
});
</script>
Then later:
<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>