I'm creating a react-based app that will function within a Wordpress page. The app is self-contained for the most part, but I'd like to be able to show/hide a div element on the page that is not part of the react app. If I were doing this with jQuery I could just do:
jQuery(".image_column").css("display","none");
But since I want to call this from a function at a certain point in the react app I'm getting tripped up. It seems like a straightforward thing to do but I'm stumped. Thanks for the help!
I think this is what you need:
document.querySelector(".image_column").style.display = "none"
This was a silly one on my part. The answer was to add "window." Once I did that everything worked. I'll leave this question up in case someone else has a temporary issue of seeing the simple answer!
In my case, with Wordpress, I needed to reference jQuery and not $. So it looks like:
window.jQuery(".entry-content").css("display","none");
Related
I'm building a react based web app using some html/css styles from one of the free "flat file" templates provided by bootstrap.
the template uses scrollspy to change the correct menu item hover colour to the section the user has scrolled to.
This effect is achieved using this code in one of the javascript files
$('body').scrollspy({
target: '#nameHere'
});
in my react component, I am trying to do this
document.body.scrollspy({ target: '#nameHere' })
but when I run the application I am getting a "document.body.scrollspy is not a function" error.
Is there something painfully obvious I am doing wrong here?
Hmmm... I think, the problem is that the document.body element has no property scrollspy.
Ok I found a few ways to get this working.
A more robust way is to use the React Scroll component mentioned by Valentin above, but this involves taking a dependency on another module and because of some other stuff in my situation I wasn't able to get this working.
A quicker, more hacky way is to add
data-spy="scroll" data-target="#namehere" data-offset="56"
to the body tag of index.html
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
I am currently working on a project where most of the code has been written by someone else . I was supposed to do some slight modifications in the existing script to incorporate changes in a new file. I came across a situation where it was very confusing . The scenario is as cited below:
I have an element named as complextabs and it is being used for almost all the pages, except for the one which is being created newly. The situation is there is a code snippet that is written as $('.complextabs').hasClass('.hide'). this incredibly returns the same as when the element complextabs is not even present in the page. Can someone please throw some light on this
And yeah, I am working on Backbone.js . Has this got something to do with the use of Backbone.js
Any suggestion and advice is highly appreciated
Nope, that has nothing to do with the use of Backbone.
Consider the following:
$('.asdasda').hasClass('hide')
This will return false, and it should return false because $('.asdasda') does not return any results. Just running that will yield a JQuery wrapper over an empty list and since there are no elements then obviously there's nothing in there with the css class hide.
If you want to check that there is an element with both the complextabs and the hide class then use $('.complextabs.hide').length.
I'm a beginner developer in Html/Javascript/CSS/Jquery coding
and while working a project, I had to integrate Jquery with previous code.
As soon as I imported Jquery, even simple buttons became styled badly. Jquery worked fine as long as I used its classes to assign styles to objects.
However since the rest of the project is not to change style, I need to know what I'm doing wrong. I've checked the objects for classes, and they have no classes, so it's not a css issue.
I narrowed down the error to the following screenshot, but I still can't figure it out. It seems to be something simple that I missed but I have no idea what it is.
Ignore the class="ui-content" and class="ui-button-text". I was just testing if something would change (nothing changed).
Try to inspect the elements that are styled wrong with your developer tools in the browser. The only styling in your example is in jquery.mobile-1.4.5.min.css, so that's where I'd be looking. Did you mistakenly delete a link tag to your stylesheet?
This is probably a very simple thing, but I'm very new to Javascript and HTML5 and can't seem to find an answer to my question.
I'm currently developing an app for Samsung Smart TV.
I currently have 2 major files: Main.js and index.html, in which most of my code is written. Also, I have a style sheet called Main.css.
My problem: I have a button the screen, that when pressing it (that is, when pushing enter on the remote), I want the screen to change in to a completely different one (from welcome screen to admin settings). How do I do that??
Hope my question is not too general. Any help would be appreciated.
You should divide your index.html with divs that represent a scene. To make it easy please use Basic Project it will generate a pattern to split the html/css/js like different pages and you only need to call sf.scene.show("SettingsScene")
If you're using javascript project, then the answer from user3384518 is the only way. Like i mentioned above, split your body to several divs and do hide/show the div
Your question is clear, but you don't say if you use a library (or not).
So, if you use jQuery :
$('.myButtonName').click(function () {
$('#myWelcomScreenDiv').hide(200, function () {
$('#myAdminSettingsDiv').show(200);
});
});
But, if you would like to do something better, I recommend you to use a framework like Backbone.js or Angular.js.